javascriptjqueryhtmlbuttonmagnific-popup

Does not have any error but the button does not works

<!DOCTYPE html>  
<html>
<head><script type="text/javascript" >
</script>

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js">
                                 $(document).ready(function () {
                                     $('#btnContact').magnificPopup({
                                         items: {
                                             src: '../Documents/ContactForm.html'
                                         },
                                         type: 'iframe'
                                     });
                                 });

</script>
<section class="singlecol nosiblings" role="main">
<style>

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

.responsive {
width: 100%;
height: auto;
}

</style>
</head>

How to solve it? When I click the button does not work. The form does not popup but does not have any errors. Why the $(document).ready(function () does not read?

Solution

  • You should write your $(document).ready handler in a different <script> tag.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js">
</script>

<script>
   $(document).ready(function () {
       $('#btnContact').magnificPopup({
         items: {
           src: '../Documents/ContactForm.html'
         },
         type: 'iframe'
       });
  });

</script>