发表新帖
发表新帖

How to create modal box using html, css and jquery?

后端 未结
关注
4 991
时光取名叫无心
时光取名叫无心 2021-01-07 13:26

How to create modal box using html, css and jquery?
相关标签:
4条回答
  • 谎友^
    2021-01-07 13:39

    Why don't you use JQuery UI Dialog, its very handy, if you still want to do this using just jquery then you can try below.

    $('#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>

    0 讨论(0)
  • 挽巷
    2021-01-07 13:41

    For creating modal, you can also use some libraries.

    One of them you can use w3css library

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

    Using Jquery and given example by 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>

    0 讨论(0)
  • 慢半拍i
    2021-01-07 13:46

    this an example multiple modal create, just check it out. 

    function createModal(){
  var dataModal = "";
      var countModal = $(".modalWrap").length;
      if(typeof countModal === "undefined" || countModal == 0){
        countModal = 0;
      }
      /*this just an example, you can try improv it more like load file or url to fill your modal data.*/
      dataModal = '<div align="center" class="modalWrap" id="modal-'+(countModal+1)+'" style="z-index:'+(countModal+1)+'"><div class="modalBody" id="modalBody-'+(countModal+1)+'"> <h1>This Modal '+(countModal+1)+'</h1><input type="button" value="modal create" onclick="createModal();"/> <input type="button" onclick="closeModal(\'#modal-'+(countModal+1)+'\');" value="close modal"/></div></div>';
      $('body').append(dataModal);
}

function closeModal(idModal){
$(idModal).remove();
}
    .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>

    you can use this if you want multiple modal create.

    0 讨论(0)
  • 青春惊慌失措
    2021-01-07 13:50

    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.

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题