magnific popup - Modal dialog. - Confusing -
i trying open simple modal dialog , have been struggling this. can
any 1 please help? html code(please remove pre). doesnot work.
can 1 please tell **strong text**me why? have not been getting kind of output need.
any 1 help me.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/magnific-popup.css" rel="stylesheet" /> <script src="js/jquery.magnific-popup.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script> </head> <body> <a class="popup-modal" href="#test-modal">open modal</a> <div id="test-modal" class="white-popup-block mfp-hide"> <h1>modal dialog</h1> <p>you won't able dismiss usual means (escape or click button), can close programatically based on user choices or actions.</p> <p><a class="popup-modal-dismiss" href="#">dismiss</a></p> </div> <script> $(function () { $('.popup-modal').magnificpopup({ type: 'inline', preloader: false, focus: '#username', modal: true }); $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventdefault(); $.magnificpopup.close(); }); }); </script> </body> </html>
load jquery before magnific-popup plugin, relies on jquery (i've never used i'm assuming seeeing pre-appended withfixed 'jquery')
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/magnific-popup.css" rel="stylesheet" /> <!-- jquery loaded first here... --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script> <!-- plugins after... --> <script src="js/jquery.magnific-popup.js"></script> </head> <body> magnific-popup
No comments:
Post a Comment