如何使用html，css和jquery创建模式框? [英] How to create modal box using html, css and jquery?

问题描述

如何使用html，css和jquery创建模式框?

How to create modal box using html, css and 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>

推荐答案

要创建模式，通常不仅需要HTML，而且还需要使用Javascript.我为您创建了一个很小的帮助您理解的东西.

For creating a modal, it often takes more than just HTML, you often have to use Javascript. I have created a very minor one for you to aid you understanding.

可以使用CSS设置按钮的样式，并隐藏未显示的隐藏元素，而Javascript可激活模式的实际功能.从这里开始，您要做的就是将HTML编辑为您想要的内容.

The CSS is there to style the button and hide elements show they do not show, the Javascript activates the actual function of the modal. All you would have to do from here is edit the HTML to whatever you want it to say.

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

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

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

这篇关于如何使用html，css和jquery创建模式框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！