Jump to content

HTML or JS Problem


Merdo
 Share

Recommended Posts

Hey guys,

i've got a problem with this "How to - css/js Modal" https://www.w3schools.com/howto/howto_css_modals.asp

It shows how to create a modal pop up but only for one modal pop up. Can someone tell me please what i have to change to enable more pop up modals?

 

Thank you very much :)

Link to comment
Share on other sites

See if you can modify this to your needs...

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
<title>Multi-Modals</title>
<!--    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- // optional -->
<!-- From: http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/ 
      For: https://w3schools.invisionzone.com/topic/61800-html-or-js-problem/
-->

<style>
        /* 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 {
         background-color: #fefefe;
         margin: auto;
         padding: 20px;
         border: 1px solid #888;
         width: 80%;
 }
        /* The Close Button */
 .close {
         color: #aaaaaa;
         float: right;
         font-size: 28px;
         font-weight: bold;
 }
 .close:hover,
 .close:focus {
         color: #000;
         text-decoration: none;
         cursor: pointer;
 }
</style>
</head>
<body>

 <h2>Modal Examples</h2>

<!-- Trigger/Open The Modal -->
 <button class="myBtn_multi">Open Modal</button>
 <button class="myBtn_multi">Open Modal2</button>
 <button class="myBtn_multi">Open Third Modal</button>

<!-- The Modal -->
 <div class="modal modal_multi">
    <!-- Modal content -->
     <div class="modal-content">
         <span class="close close_multi">×</span>
         <p>Some text in the Modal..</p>
     </div>
 </div>

<!-- The Modal2 -->
 <div  class="modal modal_multi">
    <!-- Modal2 content -->
     <div class="modal-content">
         <span class="close close_multi">×</span>
         <p>Some text in the Modal..2</p>
     </div>
 </div>

<!-- The Modal3 -->
 <div  class="modal modal_multi">
    <!-- Modal3 content -->
     <div class="modal-content">
         <span class="close close_multi">×</span>
         <p>Some text in the third Modal..3</p>
     </div>
 </div>

<script>
        // Get the modal elements
 var modalparent = document.getElementsByClassName("modal_multi");

        // Get the button that opens the modals
 var modal_btn_multi = document.getElementsByClassName("myBtn_multi");

        // Get the <span> element that closes the modals
 var span_close_multi = document.getElementsByClassName("close_multi");

        // When the user clicks the button, open the modal
 function setDataIndex() {
   for (i = 0; i < modal_btn_multi.length; i++) {
     modal_btn_multi[i].setAttribute('data-index', i);
     modalparent[i].setAttribute('data-index', i);
     span_close_multi[i].setAttribute('data-index', i);
   }
 }

 for (i = 0; i < modal_btn_multi.length; i++) {
   modal_btn_multi[i].onclick = function() {
     var ElementIndex = this.getAttribute('data-index');
     modalparent[ElementIndex].style.display = "block";
   };

// When the user clicks on <span> (x), close the modal
   span_close_multi[i].onclick = function() {
     var ElementIndex = this.getAttribute('data-index');
     modalparent[ElementIndex].style.display = "none";
   };
 }
 window.onload = function() { setDataIndex(); };

 window.onclick = function(event) {
   if (event.target === modalparent[event.target.getAttribute('data-index')]) {
     modalparent[event.target.getAttribute('data-index')].style.display = "none";
   }
 };
</script>
</body>
</html>

BTW, welcome to the forums. :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...