如何在同一页面上的多个按钮上打开一个Bootstrap模式？ [英] How to open one Bootstrap modal on multiple buttons on the same page?

问题描述

我正在尝试在同一页面上的多个按钮上打开一个模态。不幸的是我无法找到一种方法。

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?

这是我的代码

<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">&times;</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>

提前致谢！

推荐答案

确保 bootstrap js ， bootstrap css 和添加jquery 。解决您的问题。 jsfiddle的例子。请查看
JSFIDDLE 示例。

make sure bootstrap js, bootstrap css and jquery is added.Solution of your problem. jsfiddle example. Please have a look JSFIDDLE example.

创建一个账户

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">&times;</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>

这篇关于如何在同一页面上的多个按钮上打开一个Bootstrap模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！