Question

任何人都知道如何从代码后面打开一个twitter bootstrap模式？

我希望在保存的那一刻基于一些requeriment打开模态。像“嘿，没有股票，拿起以下选项之一继续（丢弃，保留...）并按下该按钮（可能会继续回发）”

我正在使用ASP.NET网络表单。

Answer 1

默认情况下，Bootstrap javascript文件包含在关闭正文标记

之前

        <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="assets/scripts.js"></script>
 </body>

我把这些javascript文件放到body标签前的head部分，我写了一个小函数来调用模态弹出窗口：

    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>

 <script type="text/javascript">
    function openModal() {
        $('#myModal').modal('show');
    }
</script>
</head>
<body>

然后我可以使用以下代码从代码隐藏调用模式弹出窗口：

protected void lbEdit_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}

Answer 2

最后我发现了阻止我从代码隐藏中显示模态的问题。人们必须认为这就像注册一个开启的客户端一样容易，例如：

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none",
    "<script>$('#mymodal').modal('show');</script>", false);

但这对我没用。

问题是，当模式位于asp：Updatepanel 期间时， Twitter Bootstrap Modals脚本根本不起作用。模态的行为从每一方都失败，代码隐藏到客户端和客户端到代码隐藏（回发）。它甚至可以在执行模式的任何j时阻止回发，就像关闭按钮一样，你还需要处理一些服务器对象（对于一个肮脏的例子）

我已经通知了bootstrap工作人员，但是他们回复了一个方便的“请给我们一个只有普通html而不是asp的失败场景。” 在我的城镇，这被称为......好吧，Bootstrap不支持任何更简单的HTML。没关系，在asp上使用它。

我认为他们至少看看他们在背景管理方面做了哪些不同的事情，我发现导致问题的主要部分，但是......（只是提示那里）

所有遇到此问题的人，请暂停更新面板。

Answer 3

也许这个答案太晚了，但它很有用要做到这一点，我们有3个步骤：
1-在HTML中创建模态结构 2-创建一个按钮，在java脚本中调用函数，打开模态并在CSS中设置display:none 3-通过后面的代码中的功能调用此按钮您可以在下面的代码段中看到以下步骤：

HTML模式：

<div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">
                                Registration done Successfully</h4>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblMessage" runat="server" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close</button>
                            <button type="button" class="btn btn-primary">
                                Save changes</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

隐藏按钮：

<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg"
                data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>

脚本代码：

<script type="text/javascript">
        function ShowPopup() {
            $("#btnShowPopup").click();
        }
    </script>

代码背后的代码：

protected void Page_Load(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
    this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}

这个解决方案是我使用它的任何解决方案之一。

Answer 4

这样做怎么样：

1）显示表单

的弹出窗口

2）使用AJAX提交表单

3）在AJAX服务器端代码中，渲染响应将：

使用带有验证的表单或仅显示消息
关闭弹出窗口（可能会将您重定向到新页面）

Answer 5

FYI，

我之前在jQuery小部件中看到过这种奇怪的行为。部分关键是将updatepanel放在模态中。这允许updatepanel的DOM“保持”模态（但它适用于bootstrap）。

Answer 6

上面的所有示例都可以正常工作，只需添加文档就绪操作并更改对文本执行更新的顺序，还请确保使用脚本管理器，否则将不适合您。这是后面代码中的文本。

aspx

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

隐藏代码

lblModalTitle.Text = "Validation Errors";
lblModalBody.Text = form.Error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);

Answer 7

这条线对我有用，可以打开代码背后的 Bootstrap Modal

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "randomText", "$(document).ready(function () {$('#myModal').modal();});", true);

从代码隐藏中打开Bootstrap Modal

7 个答案: