How do I add a 2nd modal to my html page

I didn't explain my problem in my last post.

So I want to add a second modal to my html page so if you click on "Button 1" it would open "Modal 1" and if you click "button 2" it will open "Modal 2" however "button 3" "button 4" "button 5" and "button 6" to open "modal 2". When i created the second modal and set the javascript below. It will keep opening Modal 2 on both buttons and not modal 1 on button 1.

Also note, the ID of the first button "free"

Also note, the ID of the second button "oneday"

<script>
// Get the modal1
var modal = document.getElementById('myModal1');

// Get the button that opens the modal
var btn = document.getElementById("free");

// 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";
    }
}
</script>
<script>
// Get the modal2
var modal = document.getElementById('myModal2');

// Get the button that opens the modal
var btn = document.getElementById("oneday");

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

Both buttons keep opening "Modal2" when the button 1 is set for "Modal1" HTML Below

Button 1

<!-- service item -->
<div class="col-md-4 wow fadeInLeft" data-wow-duration="500ms">
  <div class="service-item">
    <div class="service-icon">
      <i class="fa fa-snowflake-o  fa-2x"></i>
    </div>

    <div class="service-desc">
      <button id="free">
        <h3>5 Day Free Trial</h3> 
      </button>
      <b><p>So you can get a taste of the action for free, we will give new users a 5 day trial to see how they like our bot before they buy!</p> </b>
    </div>
  </div>
</div>
<!-- end service item -->

Button 2

<!-- service item -->
<div class="col-md-4 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="500ms">
  <div class="service-item">
    <div class="service-icon">
      <i class="fa fa-clock-o fa-2x"></i>
    </div>

    <div class="service-desc">
      <button id="oneday">
        <h3>1 Day</h3> 
      </button>
      <b><p>$0.74  &nbsp;&nbsp;-24 Hours </p> </b>
    </div>
  </div>
</div>
<!-- end service item -->

And the Modals are here

Modal1

<!-- Modal1 -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      <div class="form-style-8">
        <span class="close">&times;</span>
        <label for="msg">E-mail:</label>
        <input type="email" id="mail" name="email" />
      </div>
      <div>
        <label for="msg">Username:</label>
        <br>
        <input id="user" name="username">
        </textarea>
      </div>
      <div>
        <label for="msg">Password:</label>
        <br>
        <input type="password" id="pass" name="password">
        </textarea>
      </div>
      <div>
        <label for="msg">Confirm Password:</label>
        <br>
        <input type="password" id="pass" name="cpassword">
        </textarea>
      </div>
      <div>
        <label for="msg">3 Hashtags:</label>
        <br>
        <input id="tags" name="hashtags">
        </textarea>
      </div>
      <div>
        <input id="submit" type="submit" name="submit" value="submit">
      </div>
    </form>
  </div>
</div>

Modal2

<!-- Modal2 content -->
<div class="modal-content">

  <form name="getinfo2" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
    <div class="form-style-8">
      <span class="close">&times;</span>
      <label for="msg">Example:</label>
      <input type="email" id="e1" name="email" />
    </div>
    <div>
      <label for="msg">Example2:</label>
      <br>
      <input id="e2" name="username">
      </textarea>
    </div>
    <div>
      <label for="msg">Example3:</label>
      <br>
      <input type="password" id="e3" name="password">
      </textarea>
    </div>
    <div>
      <label for="msg">Example4:</label>
      <br>
      <input type="password" id="e4" name="cpassword">
      </textarea>
    </div>
    <div>
      <label for="msg">Example5:</label>
      <br>
      <input id="e5" name="hashtags">
      </textarea>
    </div>
    <div>
      <input id="submit" type="submit" name="submit" value="submit">
    </div>
  </form>
</div>
</div>

So i'm asking how do I get modal1 to work only with button1 and modal2 to work with buttons 2,3,4,5 and 6 that i will create later.

Answers:

Answer

You only need one modal -- it's just a DIV structure, nothing magic (the only magic is making it appear/disappear - and bootstrap does that trick). When needed, grab the desired content from where you have it stored, stick it into the modal's .modal-body div, and let bootstrap display it.

Here's how.

(1) Store the content for each modal in hidden DIVs elsewhere in the document.

(2) Give each button an ID with a unique number you can isolate, and give each "hidden modal content div" a name ending with the same number. For example, button "#btn_2" will match with hidden div "#mdl2", which contains the content you want for button #btn_2.

(3) Use javascript (you are using Bootstrap, which uses jQuery, so why not use jQuery) to swap in the correct content. When you click the button, isolate the number 2 (var buttNum = this.id.split('_')[1]; - try it) and use that to grab the html from the #mdl2 div (var content = $('#mdl'+buttNum).html())

(4) Let Bootstrap take care of opening/closing the modal.

Example:

$('[id^=btn_]').click(function(){
  var buttNum = this.id.split('_')[1];
  //alert(buttNum);
  var content = $('#mdl'+buttNum).html();
  $('#myModal1 .modal-body').html(content);
});
#mdl1, #mdl2, #mdl3{display:none;} /*  Hide the divs containing modal content */
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Re-Using the Same Modal</h3>
  <!-- Trigger the modal with a button -->
  <button id="btn_1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal One</button>
  <button id="btn_2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal Two</button>
  <button id="btn_3" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ogden Nash Poem</button>

  <!-- Re-Usable Modal -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-body">
          
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- Stick your modal content in hidden divs at bottom of the page -->
  <div id="mdl1">
    <div>Click outside modal to close modal</div>
    <form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      <div class="form-style-8">
        <span class="close">&times;</span>
        <label for="msg">E-mail:</label>
        <input type="email" id="mail" name="email" />
      </div>
      <div>
        <label for="msg">Username:</label>
        <br>
        <input id="user" name="username">

      </div>
      <div>
        <label for="msg">Password:</label>
        <br>
        <input type="password" id="pass" name="password">
      </div>
      <div>
        <label for="msg">Confirm Password:</label>
        <br>
        <input type="password" id="pass" name="cpassword">
      </div>
      <div>
        <label for="msg">3 Hashtags:</label>
        <br>
        <input id="tags" name="hashtags">   
      </div>
      <div>
        <input id="submit" type="submit" name="submit" value="submit">
      </div>
    </form>
  </div>
  <div id="mdl2">
      <div>Click outside modal to close modal</div>
      <h1>Image of an Animal</h1>
      <img src="http://placeimg.com/200/200/animals" />
  </div><!-- #mdl2 -->
  <div id="mdl3">
      <div>Click outside modal to close modal</div>
      <h1>Poem by Ogden Nash</h1>
      <div style="font-size:1.4rem;">
		<div>The hands of the clock were reaching high</div>
		<div>In an old midtown hotel;</div>
		<div>I name no name, but its sordid fame</div>
		<div>Is table talk in hell.</div>
		<div>I name no name, but hell's own flame</div>
		<div>Illumes the lobby garish,</div>
		<div>A gilded snare just off Times Square</div>
		<div>For the maidens of the parish.</div>

		<div>The revolving door swept the grimy floor</div>
		<div>Like a crinoline grotesque,</div>
		<div>And a lowly bum from an ancient slum</div>
		<div>Crept furtively past the desk.</div>
		<div>His footsteps sift into the lift</div>
		<div>As a knife in the sheath is slipped,</div>
		<div>Stealthy and swift into the lift</div>
		<div>As a vampire into a crypt.</div>
      </div>
  </div><!-- #mdl3 -->
</body>
</html>

Answer

You don't need to write javascript to hide or show modals use the right data-target and data-toggle in the button tag as shown below and bootstrap will automatically do the rest.

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Large Modal</button>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Large Modal</button>

Set data-toggle="modal" and data-target='<your-modal-id>' inside the button tag as shown above.

To show two modal for two buttons just add the id of new modal in the data-target='<your-modal-id>' attribute in the new button.

Now create multiple modals and give each of them a different <your_modal_id>

  <div class="modal fade" id="<your_modal_id>" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">

            YOUR MODAL HTML CODE

        </div>
    </div>
  </div>

UPDATED: ADDING CLOSE BUTTON TO CLOSE THE MODAL BY BOOTSTRAP

Replace <span class="close">&times;</span> in your modal with

<button type="button" class="close" data-dismiss="modal">&times;</button>

it will close the modal automatically on clicking close button on the modal.

Here is an example of how to use two modals

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Large Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Large Modal</button>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Large Modal</button>

  <!-- Modal 1 -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          
    		<form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      		<div class="form-style-8">
        		<button type="button" class="close" data-dismiss="modal">&times;</button>
        		<label for="msg">E-mail:</label>
        		<input type="email" id="mail" name="email" />
      		</div>
      		<div>
        		<label for="msg">Username:</label>
        	<br>
        	<input id="user" name="username">
        
      		</div>
      		<div>
        		<label for="msg">Password:</label>
        	<br>
        		<input type="password" id="pass" name="password">
      		</div>
      		<div>
              <label for="msg">Confirm Password:</label>
              <br>
              <input type="password" id="pass" name="cpassword">
      		</div>
      		<div>
              <label for="msg">3 Hashtags:</label>
              <br>
              <input id="tags" name="hashtags">   
      	   </div>
          <div>
            <input id="submit" type="submit" name="submit" value="submit">
          </div>
    	</form>
        </div>
      </div>
    </div>
  </div>
</div>

 <!-- Modal 2-->
  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
           <form name="getinfo2" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
    <div class="form-style-8">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <label for="msg">Example:</label>
      <input type="email" id="e1" name="email" />
    </div>
    <div>
      <label for="msg">Example2:</label>
      <br>
      <input id="e2" name="username">
    </div>
    <div>
      <label for="msg">Example3:</label>
      <br>
      <input type="password" id="e3" name="password">
    </div>
    <div>
      <label for="msg">Example4:</label>
      <br>
      <input type="password" id="e4" name="cpassword">
    </div>
    <div>
      <label for="msg">Example5:</label>
      <br>
      <input id="e5" name="hashtags">
    </div>
    <div>
      <input id="submit" type="submit" name="submit" value="submit">
    </div>
  </form>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.