我在上一篇文章中没有解释我的问题。
所以我想在我的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;
<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>
两个按钮都保持打开状态＆＃34; Modal2＆＃34;当按钮1设置为＆＃34; Modal1＆＃34; HTML下面
按钮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 -->
按钮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 -24 Hours </p> </b>
</div>
</div>
</div>
<!-- end service item -->
而且模态就在这里
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">×</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">×</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>
所以我问我如何让modal1只使用button1和modal2来处理我将在稍后创建的按钮2,3,4,5和6。
答案 0 :(得分：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>
它将在点击模态上的关闭按钮时自动关闭模态。
以下是如何使用两个模态的示例
<!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">×</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">×</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>
答案 1 :(得分：0)
你只需要一个模态 - 它只是一个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负责打开/关闭模态。
示例：
$('[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">×</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>