jQuery modal не работает должным образом

Question

Я пытаюсь создать скоростную страницу открытия, например, скоро открою страницу для открытия магазина freakytech.myshopify.com, а вместо кнопки ввода пароля у меня есть кнопка кода купона на покупку, которая позволяет вам получить код купона для магазина. Когда вы нажимаете эту кнопку на моей странице, она должна показывать всплывающее окно, но оно, похоже, не работает, и при нажатии кнопки ничего не происходит.

var globalModal = $('.global-modal'); 
 
    $(".marketing-button").on("click", function(e) { 
 
     e.preventDefault(); 
 
     $(globalModal).toggleClass('global-modal-show'); 
 
    }); 
 
    $(".overlay").on("click", function() { 
 
     $(globalModal).toggleClass('global-modal-show'); 
 
    }); 
 
    $(".global-modal_close").on("click", function() { 
 
     $(globalModal).toggleClass('global-modal-show'); 
 
    }); 
 
    $(".mobile-close").on("click", function(){ 
 
     $(globalModal).toggleClass('global-modal-show'); 
 
    });

img { 
 
     border: 0; 
 
    } 
 

 
    body { 
 
     margin: 0; 
 
     background-color: #e0e0e0; 
 
     font: 1em/1.4em "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; 
 
     color: #333; 
 
    } 
 
    
 
    video#bgvid { 
 
     position: fixed; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t min-width: 100%; 
 
\t min-height: 100%; 
 
\t width: auto; 
 
\t height: auto; 
 
\t z-index: -100; 
 
\t -webkit-transform: translateX(-50%) translateY(-50%); 
 
\t transform: translateX(-50%) translateY(-50%); 
 
\t background: url(http://i.imgur.com/GOUZFZw.jpg) no-repeat; 
 
\t background-size: cover; 
 
    } 
 

 
    
 
    #midheader img { 
 
     width: 40%; 
 
     height: auto; 
 
     display: block; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     margin-top: 7%; 
 
    } 
 
    
 
    @fontface { 
 
     font-family: "Brandon"; 
 
     src: url(cdn.shopify.com/s/assets/Brandon_txt_light-webfont-9b5c3220c3fd4bb7b90d26cd29a40a3d.eot?#iefix); 
 
    } 
 
    
 
*{ 
 
\t -webkit-box-sizing: border-box; 
 
    \t -moz-box-sizing: border-box; 
 
    \t box-sizing: border-box; 
 
} 
 
    
 
    .center { 
 
    text-align: center; 
 
} 
 

 
.block { 
 
    display: block; 
 
} 
 

 
.credit { 
 
    position: fixed; 
 
    bottom: 10px; 
 
    width: 100%; 
 
    left: 0; 
 
} 
 
    
 
.marketing-button{ 
 
    background: orange; 
 
    font-size: 24px; 
 
    color: #fff; 
 
    font-weight: 200; 
 
    padding: 24px 30px; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    margin-top: 40px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
} 
 
    
 
.marketing-button:hover{ 
 
    text-decoration: none; 
 
    /*border: 1px solid #47ba6b;*/ 
 
    color: #fff; 
 
    background: #47ba6b; 
 
    transition: background 0.5s ease, 
 
       padding 0.8s linear; 
 
} 
 

 

 
.btn-green-flat{ 
 
    border: 1px solid #47BA6B; 
 
    background: rgba(0, 0, 0, 0); 
 
    font-size: 20px; 
 
    color: #47BA6B; 
 
    font-weight: 200; 
 
    padding: 10px 28px; 
 
    text-align: center; 
 
    width: 175px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
} 
 
    
 
.btn-green-flat:hover{ 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: #47ba6b; 
 
    transition: background 0.2s ease, 
 
       padding 0.8s linear; 
 
    
 
} 
 
.overlay { 
 
    background: rgba(255, 255, 255, 0.77); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.global-modal { 
 
    visibility: hidden; 
 
} 
 

 
.global-modal_contents { 
 
    background: #FFF; 
 
    -webkit-box-shadow: 0 0 8px 2px rgba(182, 182, 182, 0.75); 
 
    -moz-box-shadow: 0 0 8px 2px rgba(182,182,182, 0.75); 
 
    -o-box-shadow: 0 0 8px 2px rgba(182,182,182,0.75); 
 
    box-shadow: 0 0 8px 2px rgba(182, 182, 182, 0.75); 
 
    width: 50%; 
 
    position: absolute; 
 
    left: 42%; 
 
    margin-left: -16%; 
 
    top: 15%; 
 
    min-height: 450px; 
 
} 
 
    
 
.global-modal-header{ 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
    
 
.global-modal-header h3{ 
 
    color: #34495E; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 22px; 
 
} 
 
    
 
.global-modal-header .mobile-close{ 
 
    display: none; 
 
} 
 
    
 
.global-modal-header span{ 
 
    font-weight: 200; 
 
} 
 
    
 
.global-modal-body{ 
 
    width: 100%; 
 
} 
 
    
 
.global-modal-body p{ 
 
    color: #34495E; 
 
    font-size: 16px; 
 
    line-height: 23px; 
 
    text-align: center; 
 
} 
 
    
 
.global-modal-body .content-left{ 
 
    height: 225px; 
 
    width: 50%; 
 
    position: relative; 
 
    top: 55px; 
 
    float: left; 
 
    border-right: 1px solid #CCC; 
 
} 
 

 
.global-modal-body .content-right{ 
 
    height: 225px; 
 
    width: 50%; 
 
    position: relative; 
 
    top: 55px; 
 
    float: left; 
 
} 
 
    
 
.content-right .sponsor-name{ 
 
    font-weight: bold; 
 
    color: #000; 
 
} 
 
    
 
.global-modal_contents h1{ 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 32rem; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
.global-modal_close{ 
 
    position: absolute; 
 
    right: 2rem; 
 
    top: 2rem; 
 
    text-decoration: none; 
 
    display: none; 
 
} 
 

 
.global-modal-show{ 
 
    visibility: visible; 
 
} 
 

 
.global-modal-transition{ 
 
    -webkit-transform: scale(0.7); 
 
    -moz-transform: scale(0.7); 
 
    -ms-transform: scale(0.7); 
 
    transform: scale(0.7); 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 

 
.global-modal-show .global-modal-transition{ 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    opacity: 1; 
 
} 
 

 
@media (max-width: 1139px){ 
 
    .global-modal p{ 
 
    text-align: center; 
 
    } 
 
    .global-modal-body .content-left{ 
 
    width: 80%; 
 
    display:block; 
 
    float: none; 
 
    margin: 0 auto; 
 
    border-right: none; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
    .global-modal-body .content-right{ 
 
    width: 80%; 
 
    display: block; 
 
    margin: 40px auto; 
 
    float: none; 
 
    border-right: none; 
 
    } 
 
} 
 
    
 
@media(max-width: 1027px){ 
 
    .global-modal-header h3{ 
 
    font-size: 18px; 
 
    } 
 
} 
 
    
 
@media (max-width : 767px){ 
 
    
 
    .global-modal_contents { 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    } 
 
    .global-modal-header h3{ 
 
    font-size: 22px; 
 
    } 
 
    .global-modal-header .mobile-close{ 
 
    display: block; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 10px; 
 
    cursor: pointer; 
 
    } 
 
    .global-modal_close { 
 
    display: block; 
 
    } 
 
    
 
    .global-modal-transition { 
 
    -webkit-transform: translateX(-0) translateY(150%); 
 
    -moz-transform: translateX(-0) translateY(150%); 
 
    -ms-transform: translateX(-0) translateY(150%); 
 
    transform: translateX(-0) translateY(150%); 
 
    } 
 
    
 

 
@media (max-width: 495px){ 
 
    .global-modal-header h3{ 
 
    font-size: 18px; 
 
    } 
 
} 
 
    
 
@media (max-width: 415px){ 
 
    .global-modal-header h3{ 
 
    font-size: 15px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
{% layout none %} 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Opening Soon!</title>  
 
    
 
</head> 
 
<body> 
 
    
 
    \t <video autoplay loop poster="polina.jpg" id="bgvid"> 
 
\t <source src="https://cdn.shopify.com/s/files/1/0893/7870/files/cutcircuitboard.mp4?5301657290056553738" type="video/mp4"> 
 
\t </video> 
 
    
 
    
 
    <!-- Start pop up --> 
 
    <div class="global-modal"> 
 
    <div class="overlay"></div> 
 
    <div class="global-modal_contents modal-transition"> 
 
    <div class="global-modal-header"> 
 
     <span class="mobile-close"> X </span> 
 
     <h3> <span> Whoops!</span> <b>It looks like this offer has expired<br> or else been used by another customer.</b></h3> 
 
    </div> 
 
    <div class="global-modal-body"> 
 
     <div class="content-left"> 
 
     <p> 
 
      Continue with sending this card <br> 
 
      for $1.98 plus shipping. 
 
     </p> 
 
     <a href="#"class="btn-green-flat">Send Card</a> 
 
     </div> 
 
     <div class="content-right"> 
 
     <p> To learn how to send this card<br> for free contact <span class="sponsor-name">Jordan Adler</span> <br> through the link below.</p> 
 
     <a href="#"class="btn-green-flat">Contact</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
    <!-- End pop up --> 
 
    
 
    <div id="heading"> 
 
    <div id="midheader"> 
 
\t \t <img alt="Opening soon" class="opening-soon__img" src="//cdn.shopify.com/s/assets/storefront/opening-soon-9f2c9ac6b976abf74020e687ae9e6238.svg" /> 
 
    </div> 
 
    <div class="block center"> 
 
    <a class="marketing-button" href="#">Get Your Coupon</a> 
 
    </div> 
 
    </div> 
 

 

 
    </body> 
 
</html>

Answer 1

Вы загрузки JQuery за пределами HTML-тегов. Переместите его где-нибудь внутри <html></html> tags. Если вы посмотрите на свою консоль javascript, вы увидите сообщение об ошибке: Uncaught ReferenceError: $ is not defined.

Вы можете загрузить его здесь:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Document</title> 
</head> 
<body> 

    <!-- All of your HTML stuff --> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    <!-- all of your javascript that depends on jQuery --> 
</body> 
</html> 

Here является jsbin с кодом, но ссылки сценария перемещается внутри из html тегов.