Question

我有一个模拟弹出窗口是根据我想要为厨房POS屏幕实现的W3Schools tutorial的模态页眉和页脚构建的，但由于某种原因它没有打开。

我已将其设置为单击按钮#myBtn以打开弹出窗口：

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

模态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>

打开弹出窗口的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";
  }
...

似乎没有注册打开和关闭弹出窗口的.onclick函数。不太清楚为什么。

您可以找到有效的my entire code here on jsfiddle，但不在网站上。

非常感谢任何帮助。谢谢。

编辑： @ Luca和@Friday Ameh关于相同ID和类错误的评论是正确的，因为正在生成多个相同的模态。

Answer 1

您需要在<head>部分中包含jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

/* 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";
    }
} */

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

以下使用jQuery（我强烈建议您使编码体验更容易）

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

如果您需要原始JavaScript体验，请使用以下命令：

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

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

2 个答案: