Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <title>modal test</title>
- <meta charset="utf-8"/>
- <link rel="stylesheet" href="css/foundation.min.css">
- <script type="text/javascript" src="js/vendor/jquery.min.js"></script>
- </head>
- <body>
- <div id="headerContainer">
- <a href="#" class="button" data-open="modalForm">Show Modal</a>
- </div>
- <div id="modalContainer">
- <!-- start: modalForm content -->
- <div class="reveal" data-reveal id="modalForm" role="dialog" >
- <div class="row" >
- <div class="medium-12 large-12 columns">
- <p>modal test</p>
- <button class="close-button" data-close aria-label="Close reveal" type="button"> <span aria-hidden="true">×</span> </button>
- </div>
- </div>
- </div>
- <!-- end: modalForm content -->
- </div>
- <script src='js/foundation.min.js'></script>
- <script>
- //$("#modalContainer").load("_form-modal-test.html", function() {
- $(document).foundation();
- //});
- </script>
- </body>
- </html>
- <!doctype html>
- <html>
- <head>
- <title>modal test</title>
- <meta charset="utf-8"/>
- <link rel="stylesheet" href="css/foundation.min.css">
- <script type="text/javascript" src="js/vendor/jquery.min.js"></script>
- </head>
- <body>
- <div id="headerContainer">
- <a href="#" class="button" data-open="modalForm">Show Modal</a>
- </div>
- <div id="modalContainer"></div>
- <script src='js/foundation.min.js'></script>
- <script>
- $("#modalContainer").load("_form-modal-test.html", function() {
- $(document).foundation();
- });
- </script>
- </body>
- </html>
- $(window).resize(function(){
- reveal._setPosition();
- });
- <div class="reveal" id="exampleModal1">
- <p>Some random text. Not loading the json file here.</p>
- </div>
- <script>
- $(document).foundation();
- var modal = $('#exampleModal1');
- var reveal = new Foundation.Reveal(modal);
- $('button').click(function(){
- $.ajax('test.html')
- .done(function(resp){
- modal.html(resp);
- reveal.open();
- });
- });
- </script>
- - Write a function that returns a string with the HTML code you want to implement inside the reveal (so that in the view, you only have <div id="myReveal" data-reveal></div>). Let's call this function revealHtmlFactory(). So it will return ´<h1>My Dinamic Reveal</h1>´ etc.
- - Then, you set a handler for a button that will be the reveal toggler. Let's call this onRevealToggle(). This handler will 1) $('#myReveal').html(revealHtmlFactory()); 2) $(document).foundation(); 3) $('#myReveal').foundation('open');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement