34

任何人都知道如何从后面的代码中打开 twitter 引导模式？

我想在保存时根据一些要求打开模式。像“嘿，没有库存，选择以下选项之一继续（丢弃，保留......）并按下该按钮（可能会回发以继续）”

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

4

8 回答 8

47

默认情况下，Bootstrap javascript 文件包含在结束 body 标记之前

        <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);
}
于 2013-09-22T18:04:44.967 回答
24

最后我发现了阻止我从代码隐藏中显示模态的问题。人们一定认为这就像注册一个打开的客户端脚本一样简单，例如：

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

但这对我从来没有用过。

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

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

我认为他们至少要看看他们在后台管理中所做的不同，我发现这是问题的主要部分，但是......（只是提示）

所以任何有问题的人，放下更新面板试试。

于 2013-04-23T09:24:04.187 回答
11

也许这个答案来得太晚了，但它很有用。
为此，我们有 3 个步骤：
1- 在 HTML 中创建模态结构。
2-创建一个按钮来调用java脚本中的函数，打开模式并display:none在CSS中设置。
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";
}

该解决方案是我使用过的任何解决方案之一。

于 2016-05-07T11:56:35.443 回答
1

这种打开模态的方法不会为我显示模态。我发现这是一个工作区。

我删除了：

 ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);

比我添加了一个名为 lblJavaScript 的 asp:label 和调用后面的代码：

lblJavaScript.Text = "<script language=\"JavaScript\">openModal()</script>";

现在将显示模态。

于 2016-04-12T18:33:57.210 回答
1

上面的所有示例都应该可以工作，只需添加一个文档准备操作并更改您执行文本更新的顺序，还要确保您使用的脚本管理器或者不适合您。这是后面代码中的文本。

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);
于 2020-02-07T20:40:13.533 回答
0

FYI,

I've seen this strange behavior before in jQuery widgets. Part of the key is to put the updatepanel inside the modal. This allows the DOM of the updatepanel to "stay with" the modal (however it works with bootstrap).

于 2013-07-24T15:46:07.017 回答
0

这样做怎么样：

1) 显示带有表单的弹出窗口

2) 使用 AJAX 提交表单

3) 在 AJAX 服务器端代码中，呈现响应：

  • 显示带有验证的表单或仅显示消息的弹出窗口
  • 关闭弹出窗口（并可能将您重定向到新页面）
于 2013-03-15T14:01:13.497 回答
0

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

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "randomText", "$(document).ready(function () {$('#myModal').modal();});", true);
于 2021-03-20T16:57:25.223 回答