Question

如何使用html，css和jquery创建模态框？

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

Answer 1

对于创建模态，它通常需要的不仅仅是HTML，您经常需要使用Javascript。我为你创造了一个非常小的，以帮助你理解。

CSS用于设置按钮的样式并隐藏显示它们未显示的元素，Javascript激活模态的实际功能。您需要做的就是将HTML编辑为您想要的任何内容。

＆＃13;

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

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

＆＃13;

<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

＆＃13;

Answer 2

对于创建模态，您也可以使用一些库。

其中一个可以使用w3css库

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Click Me to open modal</button>

    <div id="id01" class="w3-modal">
      <div class="w3-modal-content">
        <div class="w3-container">
          <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
          <p>Some text. Some text. Some text.</p>
          <p>Some text. Some text. Some text.</p>
        </div>
      </div>
    </div>
  </div>

</body>

使用Jquery和Leon给出的例子

$(document).ready(function() {


  $("#myBtn").on("click", function() {
    $("#modalContainer").show();
  });

  $(".close").on("click", function() {
    $("#modalContainer").hide();
  });

});

#modalContainer {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" id="myBtn">Click Me</a>

<div id="modalContainer">

  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

Answer 3

为什么不使用JQuery UI Dialog，它非常方便，如果您仍然想使用jquery执行此操作，那么您可以在下面尝试。

$('#myBtn').click(function(){
    $('.modal-content').show();
    $('body').toggleClass('modalbackground');
});

$('.modal-content .close').click(function(){
    $('.modal-content').hide();
    $('body').toggleClass('modalbackground');
});

.modal-content {
    display: none;
    position: fixed;
}

.modalbackground {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    z-index: 1;
}

.modal-content {
    width: 33.333%;
    top: 20%;
    left: 33.3333%;
    background: white;
    z-index: 2;
}

.close{
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">Open Modal</button>

<div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

Answer 4

这是一个多模态创建示例，只需检查一下即可。

.modalWrap{
width : 100%;
background : rgba(0,0,0,0.5);
min-height : 500px;
position : fixed;
top:0;
left:0;
}

.modalBody{
width : 60%;
min-height: 250px;
background : #fff;
margin-top : 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="button" value="modal create" onclick="createModal();"/>
</body>
</html>

display: flex

如果你想要多个模态创建，你可以使用它。

如何使用html，css和jquery创建模态框？

4 个答案: