jQuery 模式不能按预期工作

标签 jquery html css shopify

我正在尝试创建一个即将开始的页面，就像 shopify 的即将开始页面在这里 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;
	  top: 50%;
	  left: 50%;
	  min-width: 100%;
	  min-height: 100%;
	  width: auto;
	  height: auto;
	  z-index: -100;
	  -webkit-transform: translateX(-50%) translateY(-50%);
	  transform: translateX(-50%) translateY(-50%);
	  background: url(http://i.imgur.com/GOUZFZw.jpg) no-repeat;
	  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); 
    }
    
*{
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	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>
  
  	<video autoplay loop poster="polina.jpg" id="bgvid">
	<source src="https://cdn.shopify.com/s/files/1/0893/7870/files/cutcircuitboard.mp4?5301657290056553738" type="video/mp4">
	</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">
		<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>

最佳答案

您正在 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是包含您的代码的 jsbin，但脚本引用已移至 html 中标签。

关于jQuery 模式不能按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30904920/

上一篇：javascript - 在一页上实现 2 个 Bootstrap 轮播？

下一篇：html - Bootstrap Carousel 图片大小变化导致页面元素移动的最佳解决方案

相关文章：

Javascript 多维数组 : Add Values

html - CSS 将超链接定位在 IE9 中绝对定位的 div 的底部

html - 使用 "position:absolute"样式时选择框不可点击

javascript - 从 XML 中检索标签

javascript - 我希望在移动设备中关闭 div 后，我的 div 显示在桌面上

jquery - CSS/HTML/JQuery - 如何使文本框闪烁并具有发光效果？

javascript - 流体动力学模拟，有障碍物

iphone - 容器 div 的自适应 CSS

css - 在相同高度缩放 float div

javascript - 单击 Canvas 区域时如何为光标图像设置动画？

©2024 IT工具网  联系我们