Jump to content

HTML or JS Problem


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 post
Share on other sites

How do you want to trigger them?

Link to post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...