jQuery模式不能正常工作

我正在嘗試創建一個即將開放的頁面，就像Shopify的開放頁面這裏freakytech.myshopify.com，而不是輸入密碼按鈕我有一個獲得優惠券代碼按鈕，可以讓你獲得商店的優惠券代碼。當你點擊我的頁面上的這個按鈕時，它應該會顯示一個彈出框，但它似乎沒有工作，並且當按鈕被點擊時它什麼都不做。jQuery模式不能正常工作

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>

來源

2015-06-18 Matt

你有包含jQuery文件嗎？ – Girish

對不起。我是否需要將其包含在此網站上？編輯：我剛剛添加在這個網站上的JQuery文件，它的工作，但它仍然不會在這個網站上工作。 – Matt

它的工作，但仍然無法正常工作？ :) –

你加載HTML標記之外的jQuery。將它移動到<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是你的代碼，但html標籤的內部移動的腳本參考jsbin。

來源

2015-06-22 19:27:58 Tom

謝謝你，工作。 – Matt

jQuery模式不能正常工作

回答

相關問題