HTML or JS Problem

Merdo · July 22, 2020

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

niche · July 22, 2020

How do you want to trigger them?

JMRKER · July 24, 2020

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.

Sign In

HTML or JS Problem

Recommended Posts

Merdo

Link to comment

Share on other sites

niche

Link to comment

Share on other sites

JMRKER

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity