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

后端未结

关注

 2  417

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

相关标签:

2条回答

南笙

2021-01-24 02:36

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">×</span> in your modal with

<button type="button" class="close" data-dismiss="modal">×</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>

0 讨论(0)

北海茫月

2021-01-24 02:38

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>

0 讨论(0)