简体   繁体   English

JS和CSS模式弹出窗口无法打开

[英]JS and CSS Modal Popup Not Opening

I have a modal popup built from the W3Schools tutorial 's Modal Header and Footers I want to implement for a kitchen POS screen, but for some reason it's not opening up. 我从W3Schools教程的 “模态页眉和页脚”中构建了一个模态弹出窗口,我想为厨房POS屏幕实现该模态弹出窗口,但由于某种原因,它没有打开。

I have it set where you click the button #myBtn to open the popup: 我将其设置为您单击#myBtn按钮以打开弹出窗口的位置:

<button id="myBtn" class="footnote">Open Modal</button>

And the modal HTML structure is: 模态HTML结构为:

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

And the JS to open the popup is: 而打开弹出窗口的JS是:

$(document).ready(function(){
  // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

  // When the user clicks the button, open the modal 
  btn.onclick = function() {
    modal.style.display = "block";
  }
...

It seems to not be registering the .onclick function which opens and closes the popup. 似乎没有注册打开和关闭弹出窗口的.onclick函数。 Not really sure why. 不太确定为什么。

You can find my entire code here on jsfiddle , which works, just not on the site. 您可以在jsfiddle上找到我的完整代码 ,该代码可以运行,只是不在站点上。

Any help is greatly appreciated. 任何帮助是极大的赞赏。 Thank you. 谢谢。

Edited: @Luca's and @Friday Ameh's comments about the error of identical IDs and classes are correct, as multiple identical modals were being generated. 编辑: @Luca和@Friday Ameh关于相同ID和类的错误的注释是正确的,因为正在生成多个相同的模态。

You need to include jquery in <head> section <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 您需要在<head>部分<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>包含jquery。

 /* Modal order display */ $(document).ready(function(){ // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } }); /* // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } */ 
 body { font-size: 14px; /* 14px = 1em */ font-family: Arial, Helvetica, sans-serif; } /* Order display */ div.col-sm-4 { width: 75%; margin: 0 auto; /*background: rgb(241,103,61);*/ background: linear-gradient(30deg, rgba(241,103,61,1) 0%, rgba(241,103,61,1) 60%, rgba(248,164,76,1) 100%); padding: 0; border-radius: 10px; box-shadow: 1px 1px 5px 1px black; } /* Order details */ .order-id, .order-date, .order-time, .footnote { color: white; font-size: 14px; line-height: 28px; letter-spacing: 0.05em; display: block; margin: 0; padding: 0 15px; } /* Modal display button */ button#myBtn { /* visibility: hidden; */ padding: 2% 15px !important; background-color: orangered; border: none; border-bottom-left-radius: 10px; transition: all 0.2s ease; } #myBtn:hover { cursor: pointer; background-color: steelblue !important; } /* Order items display */ div.order-items { padding: 15px; background: white; transition: all 0.2s ease; } /* Highlight order button */ div.highlighter { width: 100%; display: block; position: relative; } div.highlighter>p.highlight-btn { display: inline-block; /* float: right; */ position: absolute; right: -4%; bottom: -59px; margin: 0; padding: 2%; border-radius: 0; border-top-left-radius: 50px; border-bottom-right-radius: 10px !important; color: white; background-color: orange; transition: all 0.2s ease; } p.highlight-btn:hover { cursor: pointer; background-color: steelblue !important; } p.highlight-btn>span { font-size: 14px; line-height: 28px; visibility: hidden; padding: 0 15px; } /* Highlight classes */ .highlighted { background: transparent !important; } .highlighted > p { color: white; } .unhighlighted { background: white !important; } /* Revert order button */ div.reverter { width: 100%; display: block; position: relative; } div.reverter > p.revert-btn { display: inline-block; /* float: right; */ position: absolute; right: 0; top: 0; margin: 0; padding: 2%; border-radius: 0; border-bottom-left-radius: 10px; border-top-right-radius: 10px !important; color: white; background-color: orangered; transition: all 0.2s ease; } p.revert-btn:hover { cursor: pointer; background-color: steelblue !important; } p.revert-btn>span { font-size: 14px; line-height: 28px; visibility: hidden; padding: 0 15px; } /* Show today's orders - ON HOLD */ .show-today { background-color: blue !important; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* The Close Button */ .close { color: white; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px; background: linear-gradient(30deg, rgba(241,103,61,1) 0%, rgba(241,103,61,1) 60%, rgba(248,164,76,1) 100%); /* background-color: #5cb85c; */ color: white; } .modal-body {padding: 2px 16px;} .modal-footer { padding: 2px 16px; background: linear-gradient(30deg, rgba(241,103,61,1) 0%, rgba(241,103,61,1) 60%, rgba(248,164,76,1) 100%); /* background-color: #5cb85c; */ color: white; } .modal-show { display: block; } .modal-hide { display: hide; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Trigger/Open The Modal --> <div class="col-sm-4 show-completed"> <div class="order"> <h6 class="order-id">Order # 0001</h6> <h6 class="order-date">04/03/2018</h6> <h6 class="order-time">Order due at: 04:00 PM</h6> <div class="order-items"> <p>Combo #2 x2</p> <p>Combo #4 x1</p> <p>Seasonal Crudite x1</p> <p>Grilled Pizza Doughs x2</p> <p>Fresh Fruit Platters x1</p> <div class="highlighter"> <p class="highlight-btn"><span>Highlight me</span></p> </div> </div> <button id="myBtn" class="footnote">Open Modal</button> </div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>Modal Header</h2> </div> <div class="modal-body"> <p>Some text in the Modal Body</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> 

The following uses jQuery (which I highly recommend you get to make your coding experience a lot easier) 以下使用jQuery(强烈建议您使用jQuery,以使您的编码体验更加轻松)

$("#YourBtnId").click(function(){
  $("#myModal").css("display","block");
)}

If you want a raw JavaScript experience, use the following: 如果您希望获得原始的JavaScript体验,请使用以下代码:

document.getElementById('YourBtnId').onclick=function(){
  modal.style.display = "block";
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM