如何在同一页面上的多个按钮上打开一个Bootstrap模式?

乔伊斯坦·费尔南德斯(Joystan Fernandes)

我正在尝试在同一页面上的多个按钮上打开单个模式。不幸的是,我找不到办法。

我想在同一页面上有多个注册选项,以打开模式,用户可以在模式和注册上填写表格。

使用当前代码,模态在第一个按钮上有效,但在页面上的其他按钮上无效。:(

谁能告诉我解决方案?

这是我的代码

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

提前致谢!

Umair

确保添加了bootstrap jsbootstrap cssjquery。解决您的问题。jsfiddle示例。请看一下JSFIDDLE示例。

创建一个帐户

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从同一HTML页面上的多个按钮打开一个对话框

来自分类Dev

如何在 selenium Web 驱动程序的同一页面上单击多个按钮中的一个按钮?

来自分类Dev

如何在同一页面上制作多个MDB模式,并在每个模式中弹出不同的内容?

来自分类Dev

Bootstrap在同一页面上打开2个不同的模态对话框

来自分类Dev

如何在同一页面上使用具有相同 ID 的多个(动态)切换按钮?

来自分类Dev

如何在同一页面上使用锚点选项卡去一个divdiv?

来自分类Dev

如何使 2 个相同的开关按钮在同一页面上工作?

来自分类Dev

如何在同一页面上加载多个版本的jQuery插件?

来自分类Dev

如何在同一页面上处理多个表单

来自分类Dev

如何在Django的同一页面上具有多个相同形式

来自分类Dev

如何在同一页面上为多个图使用单个xlabel和ylabel

来自分类Dev

D3酒窝-如何在同一页面上显示多个酒窝图表?

来自分类Dev

如何在同一页面上呈现多个AmCharts(版本3)序列图?

来自分类Dev

如何在同一页面上加载具有不同数据的多个Chartjs图表?

来自分类Dev

如何在同一页面上从 Django 和 Ajax 获得多个发布请求?

来自分类Dev

如何在同一页面上使用多个 websocket?

来自分类Dev

如何在同一页面上运行多个应用程序部分

来自分类Dev

如何创建一个可以打开新页面并带有返回上一页选项的按钮[ReactJS

来自分类Dev

如何在同一页面上拥有同一手风琴的两个副本的同时,保持每个手风琴的第一个链接处于打开状态

来自分类Dev

如何在同一页面上呈现两个菜单?

来自分类Dev

如何在同一页面上创建2个btn-group?

来自分类Dev

如何在同一页面上放置两个幻灯片框?

来自分类Dev

如何在同一页面上的另一个Ascx控件中访问一个Ascx控件中的值

来自分类Dev

Bootstrap Modal显示在一个页面上,而不显示在另一页面上?

来自分类Dev

磁贴将是可单击的对象,单击它们将打开一个单独的页面,而不是同一页面的角度

来自分类Dev

我可以从一个按钮链接到另一个按钮(在同一页面上)吗?

来自分类Dev

验证同一页面上的多个表单

来自分类Dev

同一页面上有多个Slickgrid

来自分类Dev

多个计算,显示在同一页面上

Related 相关文章

  1. 1

    如何从同一HTML页面上的多个按钮打开一个对话框

  2. 2

    如何在 selenium Web 驱动程序的同一页面上单击多个按钮中的一个按钮?

  3. 3

    如何在同一页面上制作多个MDB模式,并在每个模式中弹出不同的内容?

  4. 4

    Bootstrap在同一页面上打开2个不同的模态对话框

  5. 5

    如何在同一页面上使用具有相同 ID 的多个(动态)切换按钮?

  6. 6

    如何在同一页面上使用锚点选项卡去一个divdiv?

  7. 7

    如何使 2 个相同的开关按钮在同一页面上工作?

  8. 8

    如何在同一页面上加载多个版本的jQuery插件?

  9. 9

    如何在同一页面上处理多个表单

  10. 10

    如何在Django的同一页面上具有多个相同形式

  11. 11

    如何在同一页面上为多个图使用单个xlabel和ylabel

  12. 12

    D3酒窝-如何在同一页面上显示多个酒窝图表?

  13. 13

    如何在同一页面上呈现多个AmCharts(版本3)序列图?

  14. 14

    如何在同一页面上加载具有不同数据的多个Chartjs图表?

  15. 15

    如何在同一页面上从 Django 和 Ajax 获得多个发布请求?

  16. 16

    如何在同一页面上使用多个 websocket?

  17. 17

    如何在同一页面上运行多个应用程序部分

  18. 18

    如何创建一个可以打开新页面并带有返回上一页选项的按钮[ReactJS

  19. 19

    如何在同一页面上拥有同一手风琴的两个副本的同时,保持每个手风琴的第一个链接处于打开状态

  20. 20

    如何在同一页面上呈现两个菜单?

  21. 21

    如何在同一页面上创建2个btn-group?

  22. 22

    如何在同一页面上放置两个幻灯片框?

  23. 23

    如何在同一页面上的另一个Ascx控件中访问一个Ascx控件中的值

  24. 24

    Bootstrap Modal显示在一个页面上,而不显示在另一页面上?

  25. 25

    磁贴将是可单击的对象,单击它们将打开一个单独的页面,而不是同一页面的角度

  26. 26

    我可以从一个按钮链接到另一个按钮(在同一页面上)吗?

  27. 27

    验证同一页面上的多个表单

  28. 28

    同一页面上有多个Slickgrid

  29. 29

    多个计算,显示在同一页面上

热门标签

归档