Question

我在上一篇文章中没有解释我的问题。

所以我想在我的html页面添加第二个模态，所以如果你点击＆＃34;按钮1＆＃34;它会打开＆＃34;模态1＆＃34;如果你点击＆＃34;按钮2＆＃34;它会打开＆＃34;模态2＆＃34;然而＆＃34;按钮3＆＃34; ＆＃34;按钮4＆＃34; ＆＃34;按钮5＆＃34;和＆＃34;按钮6＆＃34;打开＆＃34;模态2＆＃34;。当我创建第二个模态并在下面设置javascript。它将继续打开两个按钮上的模态2而不是按钮1上的模态1.

另请注意，第一个按钮的ID＆＃34;免费＆＃34;

另请注意，第二个按钮的ID＆＃34; oneday＆＃34;

＆＃13;

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

＆＃13;

两个按钮都保持打开状态＆＃34; Modal2＆＃34;当按钮1设置为＆＃34; Modal1＆＃34; HTML下面

按钮1

＆＃13;

<!-- 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 -->

＆＃13;

按钮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 -->

而且模态就在这里

Modal1

＆＃13;

<!-- 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>

＆＃13;

Modal2

＆＃13;

<!-- 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>

＆＃13;

所以我问我如何让modal1只使用button1和modal2来处理我将在稍后创建的按钮2,3,4,5和6。

Answer 1

您不需要编写javascript来隐藏或显示模态使用按钮标记中的正确数据目标和数据切换，如下所示，bootstrap将自动完成剩下的工作。

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

在按钮标记内设置data-toggle="modal"和data-target='<your-modal-id>'，如上所示。

要显示两个按钮的两个模态，只需在新按钮的data-target='<your-modal-id>'属性中添加新模态的ID。

现在创建多个模态并为每个模态赋予不同的<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>

更新：添加关闭按钮以通过BOOTSTRAP关闭模式

使用

替换模态中的<span class="close">×</span>

<button type="button" class="close" data-dismiss="modal">×</button>

它将在点击模态上的关闭按钮时自动关闭模态。

以下是如何使用两个模态的示例

＆＃13;

<!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>

＆＃13;

Answer 2

你只需要一个模态 - 它只是一个DIV结构，没有什么神奇的（唯一的magic使它显得/消失 - 而bootstrap就是这个技巧）。如果需要，从存储位置抓取所需内容，将其粘贴到模态的.modal-body div中，然后让bootstrap显示它。

这是怎样的。

（1）将隐藏DIV中每个模态的内容存储在文档的其他位置。

（2）给每个按钮一个ID，你可以隔离一个唯一的号码，然后给每个＆＃34;隐藏的模态内容div＆＃34;名称以相同的数字结尾。例如，按钮＆＃34;＃btn_2＆＃34;将与隐藏的div＆＃34;＃mdl2＆＃34;匹配，其中包含按钮＃btn_2所需的内容。

（3）使用javascript（你使用的是Bootstrap，它使用jQuery，所以为什么不使用jQuery）来交换正确的内容。单击按钮时，隔离数字2（var buttNum = this.id.split('_')[1]; - 尝试它）并使用它来从#mdl2 div（var content = $('#mdl'+buttNum).html()）中获取html

（4）让Bootstrap负责打开/关闭模态。

示例：

＆＃13;

$('[id^=btn_]').click(function(){
  var buttNum = this.id.split('_')[1];
  //alert(buttNum);
  var content = $('#mdl'+buttNum).html();
  $('#myModal1 .modal-body').html(content);
});

＆＃13;

#mdl1, #mdl2, #mdl3{display:none;} /*  Hide the divs containing modal content */

＆＃13;

<!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>

＆＃13;

如何在我的html页面中添加第二个模态

2 个答案: