bootstrap模态框怎么实现打开一个其他的网页

Posted 2023-05-03

1、首先在html中导入所需要的库文件，如下图所示，一定注意导入jquery文件。

2、然后在Body区域应用了bootstrap的modal样式，如下图所示。

3、然后在modal样式的div里继续放置内容区域，内容区域的样式为modal-content，如下图所示。

4、然后来看一下内容区分别有三个样式，头尾以及中间部分，接下来定义个按钮，当点击按钮的时候会弹出框，如下图所示。

5、注意一定要指定按钮的data-target属性，如下图所示。

6、最后运行程序以后，会看到如下图所示的内容，这就是bootstrap模态框。

参考技术A 用来点击之后弹出模态框的按钮，使用a标签，标签属性中data-target用#id，属性href=url，如下所示
1<a data-toggle="modal" href="remote.html" class="btn btn-primary" data-target="#modal">弹出</a>

Bootstrap 模态叠加另一个模态

【中文标题】Bootstrap 模态叠加另一个模态

【英文标题】：Bootstrap Modal Overlay Another Modal

【发布时间】：2016-10-12 01:36:51

【问题描述】：

在网上搜索了几个小时后，我找到了一些关于如何在另一个 Modal 中打开新 Modal 的解决方案。但我的要求有点不同。我想使用一种有点“通用”的模式形式，它将作为我页面中的消息框（不是整个应用程序，仅适用于当前页面）。一旦被调用/显示，此消息框将全部覆盖。

例如，我为我的数据输入打开一个 Modal 表单，如果我想向用户提示一条消息，我将在数据输入表单上弹出另一个 Modal 表单。

我是网络编程新手，所以我不知道我的代码哪里出错了，或者我遗漏了什么。

这是我的设计师的代码：

<div class="modal fade" id="modAddBulletin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 15%;" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="H2"><asp:Label ID="Label3" runat="server" Text="Add Bulletin"></asp:Label></h3>
                </div>
                <div class="modal-body" style="padding-bottom:0px">
                    <div="container">
                      <div>
                      <fieldset class="form-group">
                        <label for="txtTitle">Title</label>
                        <input id="txtTitle" runat="server" type="text" class="form-control"  />
                      </fieldset>

                      <fieldset class="form-group">
                        <label for="txtDescription">Description</label>
                        <textarea class="form-control" runat="server" id="txtDescription" rows="6" style="min-width:568px; min-height:151px; max-width: 568px;"></textarea>
                      </fieldset>

                      <fieldset class="form-group">
                      <asp:FileUpload ID="fleUpload" runat="server" data-filename-placement="inside" />
                      </fieldset>
                      </div>

                   </div>
                <div class="modal-footer">    
                        <asp:LinkButton ID="btnUpload" runat="server" CssClass="btn btn-success" Width="200px">
                        <span class="glyphicon glyphicon-cloud-upload"></span> Upload</asp:LinkButton>

                        <asp:LinkButton ID="btnCloseUpload" runat="server" CssClass="btn btn-default" Width="100px"> 
                        <span class="glyphicon glyphicon-share-alt" ></span> Back</asp:LinkButton>
                </div>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->



        <%--// For Popup Message --%>


       <div class="modal fade" id="modalMsg"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 30%;" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background:#4682b4; color:White;">
                    <h4 class="modal-title">Message</h4>
                </div>

                <div class="modal-body">
                    <asp:Label ID="lblErrorMsg" runat="server" Font-Names="Calibri" Font-Size="11pt"></asp:Label>
                </div>

            <div class="modal-footer">
               <asp:LinkButton ID="btnErrMsgClose" runat="server" CssClass="btn btn-primary" Width="100px" data-dismiss="modal">Close</asp:LinkButton>
            </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

这是我从代码隐藏中调用它们的方式：

ClientScript.RegisterStartupScript(Me.GetType(), "Show1", "<script> $('#modalMsg').modal('show');</script>")
ClientScript.RegisterStartupScript(Me.GetType(), "Show", "<script> $('#modAddBulletin').modal('show');</script>")

结果如下：

提前谢谢你。

【问题讨论】：

@SureshKamrushi，这篇文章已经很老了，但我还是检查了你的链接。它与这里所说的要求不同，您的代码所做的是关闭以前的模式并打开一个与我需要的相反的新模式。您也可以查看我在帖子中附加的图片。基本上，模态优于模态。不过感谢您的努力！

【参考方案1】：

您可以使用z-index来解决您的问题。

var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() 
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
, 0);

ONLINE DEMO

【讨论】：

您好，感谢您的回复。但我认为它仍然需要将 href 固定在表单上以显示其他模态表单。我从代码隐藏中调用我的消息框。有没有一种灵活的方法可以在没有直接 href 到其他形式的情况下做到这一点？

@CrushSundae 我发现这个How to open a Bootstrap modal window using jQuery? 可以帮助你。

链接失效了，伙计。我想做的是用另一个模态覆盖所有形式，包括以前的模态。