如何在切换时显示不同的Bootstrap模式

bc110402307赛义德Zeeshan海德

我正在使用Bootstrap Modal。我有两个模态。当用户单击“忘记密码”链接时,“第一模式”切换/打开第二个模式对话框。第二个模态与第一个模态相同,除了主体。

我想做的是,从第一个模态切换到第二个模态时,第二个模态将出现不同的页眉和页脚。是否可以?我如何拥有此功能?

我的代码:

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px; background-color: whitesmoke">
          <button type="button" class="close" data-dismiss="modal">
            <span title="close" class="glyphicon glyphicon-remove"></span>
          </button>
          <h2><span class="glyphicon glyphicon"></span> Login to our site</h2>
          <p>Enter username and password to log on:</p>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <div id="modalTab">
            <div class="tab-content">
              <div class="tab-pane active" id="login">
                <form role="form">
                  <div class="form-group">
                    <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
                    <input type="text" class="form-control" id="usrname" placeholder="Enter email">
                  </div>
                  <div class="form-group">
                    <label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label>
                    <!--<div class="inner-addon right-addon">
    </div>-->
                    <input type="password" class="form-control" id="password" placeholder="Enter password">
                    <i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="" checked>Remember me</label>
                  </div>
                  <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
                </form>
              </div>
              <div class="tab-pane fade" id="forgotpassword">
                <form method="post" action='' name="forgot_password">
                  <p>Send us your email and we'll reset it for you!</p>
                  <input type="text" name="eid" id="email" placeholder="Email">
                  <p>
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <a href="#login" data-toggle="tab">Wait, I remember it now!</a>
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!--End Body-->
        <div class="modal-footer" style="background-color: whitesmoke">
          <!--<button type="submit" class="btn btn-danger btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>-->
          <p class="text-center">Not a member? <a href="form_signup.php">Sign Up</a></p>
          <p class="text-center">Forgot <a href="#forgotpassword" data-toggle="tab">Password?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
丹尼斯·韦塞尔斯

到这里,我希望这段代码对您有所帮助:

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript">

    $(function () {
        var showMessage = function (heading, message) {

            $(".modal-body").empty();
            $(".modal-title").empty();

            $(".modal-title").html(heading);
            $(".modal-body").html(message);

            $('#messageBox').modal('show');
        };

        $("#popup1").click(function () {
            showMessage("Heading 1", "Modal popup message 1");
        });

        $("#popup2").click(function () {
            showMessage("Heading 2", "Modal popup message 2");
        });
    });
</script>


<input id="popup1" type="button" value="Show Popup" />
<input id="popup2" type="button" value="Show Another Popup" />

<div class="modal fade" id="messageBox" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

输出弹出窗口1:

弹出式视窗1

输出弹出窗口2:

在此处输入图片说明

只是以它为例,并对您的代码进行必要的更改以使其正常运行

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Bootstrap模式之间切换

来自分类Dev

在模式关闭后,如何防止将焦点集中在Bootstrap模式的切换按钮上?

来自分类Dev

如何在片段切换语句中显示活动

来自分类Dev

如何在循环中的不同语句之间切换

来自分类Dev

推送存储库时如何在不同用户(github帐户)之间切换?

来自分类Dev

如何在切换时显示不同的Bootstrap模式

来自分类Dev

Linux内核如何在用户模式和内核模式堆栈之间切换?

来自分类Dev

如何在Bootstrap 4切换中单击时隐藏/显示多个效果

来自分类Dev

如何在Android Studio预览上的夜间模式和灯光模式之间切换?

来自分类Dev

如何在一个悬停时切换两个同级元素的显示属性?

来自分类Dev

如何在切换框架时验证WebDriver的焦点

来自分类Dev

如何在悬停时更改bootstrap 4导航栏切换器的颜色?

来自分类Dev

错误:如何在隐藏和显示之间切换

来自分类Dev

如何在切换时显示输入字段?

来自分类Dev

屏幕空白时如何在Windows 8上切换显示器显示?

来自分类Dev

如何在屏幕切换时执行脚本?

来自分类Dev

如何在jQuery中使用切换显示内容

来自分类Dev

在Bootstrap模式之间切换

来自分类Dev

如何在切换类中显示不同的工具提示文本

来自分类Dev

在Mac上全屏显示时,如何在Chrome窗口之间切换?

来自分类Dev

如何在片段切换语句中显示活动

来自分类Dev

在切换按钮切换时显示消息

来自分类Dev

如何在点击时切换标签

来自分类Dev

Bootstrap表如何隐藏,使用JavaScript切换可见时无法正确显示

来自分类Dev

如何在隐藏和显示之间切换?

来自分类Dev

如何在第一次动画/转换时切换显示:无/显示:阻止

来自分类Dev

Reactjs:如何在单击按钮时一次显示一个切换的内容

来自分类Dev

React 切换显示模式

来自分类Dev

如何在连续点击时切换不同的颜色(在 SVG 对象上)

Related 相关文章

  1. 1

    在Bootstrap模式之间切换

  2. 2

    在模式关闭后,如何防止将焦点集中在Bootstrap模式的切换按钮上?

  3. 3

    如何在片段切换语句中显示活动

  4. 4

    如何在循环中的不同语句之间切换

  5. 5

    推送存储库时如何在不同用户(github帐户)之间切换?

  6. 6

    如何在切换时显示不同的Bootstrap模式

  7. 7

    Linux内核如何在用户模式和内核模式堆栈之间切换?

  8. 8

    如何在Bootstrap 4切换中单击时隐藏/显示多个效果

  9. 9

    如何在Android Studio预览上的夜间模式和灯光模式之间切换?

  10. 10

    如何在一个悬停时切换两个同级元素的显示属性?

  11. 11

    如何在切换框架时验证WebDriver的焦点

  12. 12

    如何在悬停时更改bootstrap 4导航栏切换器的颜色?

  13. 13

    错误:如何在隐藏和显示之间切换

  14. 14

    如何在切换时显示输入字段?

  15. 15

    屏幕空白时如何在Windows 8上切换显示器显示?

  16. 16

    如何在屏幕切换时执行脚本?

  17. 17

    如何在jQuery中使用切换显示内容

  18. 18

    在Bootstrap模式之间切换

  19. 19

    如何在切换类中显示不同的工具提示文本

  20. 20

    在Mac上全屏显示时,如何在Chrome窗口之间切换?

  21. 21

    如何在片段切换语句中显示活动

  22. 22

    在切换按钮切换时显示消息

  23. 23

    如何在点击时切换标签

  24. 24

    Bootstrap表如何隐藏,使用JavaScript切换可见时无法正确显示

  25. 25

    如何在隐藏和显示之间切换?

  26. 26

    如何在第一次动画/转换时切换显示:无/显示:阻止

  27. 27

    Reactjs:如何在单击按钮时一次显示一个切换的内容

  28. 28

    React 切换显示模式

  29. 29

    如何在连续点击时切换不同的颜色(在 SVG 对象上)

热门标签

归档