[英]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">×</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">×</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.