twitter-bootstrap 如何在同一页面上的多个按钮上打开一个 Bootstrap 模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29226462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open one Bootstrap modal on multiple buttons on the same page?
提问by Joystan Fernandes
I am trying to open a single modal on multiple buttons on the same page. Unfortunately I can't figure out a way to do so.
我试图在同一页面上的多个按钮上打开一个模式。不幸的是，我想不出这样做的方法。
I want to have multiple signup option the same page which open up a modal and a user can fill out the form on the modal and signup..
我想在打开模态的同一页面上有多个注册选项，用户可以填写模态上的表单并注册..
With the current code the modal works on the first button but doesn't work on the other buttons on the page. :(
使用当前代码，模态适用于第一个按钮，但不适用于页面上的其他按钮。:(
Can anyone tell me a solution to this?
谁能告诉我解决这个问题的方法？
Here is my code
这是我的代码
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Create an account
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Sign Up Here
</button>
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div class="col-sm-6 text-center col-xs-height">
<div class="signup-popup">
<h4>Signup Now</h4>
<input class="col-xs-12" type="text" name="username" placeholder="Email Address">
<input class="col-xs-12" type="password" name="password" placeholder="Password">
<input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
<input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
</div>
</div>
<div class="col-sm-6 col-xs-height">
<div class="signup-facebook">
<div class="signup-facebook-container">
<a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
<i class="fa fa-facebook"></i> | Signup with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in Advance!
提前致谢！
回答by Umair
make sure bootstrap js, bootstrap cssand jqueryis added.Solution of your problem. jsfiddle example. Please have a look JSFIDDLEexample.
确保添加了bootstrap js、bootstrap css和jquery。解决您的问题。jsfiddle 示例。请看一下 JSFIDDLE示例。
Create an account
创建一个帐户
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Sign Up Here
</button>
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div class="col-sm-6 text-center col-xs-height">
<div class="signup-popup">
<h4>Signup Now</h4>
<input class="col-xs-12" type="text" name="username" placeholder="Email Address">
<input class="col-xs-12" type="password" name="password" placeholder="Password">
<input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
<input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
</div>
</div>
<div class="col-sm-6 col-xs-height">
<div class="signup-facebook">
<div class="signup-facebook-container">
<a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
<i class="fa fa-facebook"></i> | Signup with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
回答by Butterfly
Try this,
试试这个，
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".signupModal">
Create an account
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".signupModal">
Sign Up Here
</button>
<!-- Modal -->
<div class="modal fade signupModal" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div class="col-sm-6 text-center col-xs-height">
<div class="signup-popup">
<h4>Signup Now</h4>
<input class="col-xs-12" type="text" name="username" placeholder="Email Address">
<input class="col-xs-12" type="password" name="password" placeholder="Password">
<input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
<input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
</div>
</div>
<div class="col-sm-6 col-xs-height">
<div class="signup-facebook">
<div class="signup-facebook-container">
<a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
<i class="fa fa-facebook"></i> | Signup with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn" id="add-more">Click Me</button>
Make sure that bootstrap.js and bootstrap.css included
确保包含 bootstrap.js 和 bootstrap.css
