Question

对于我的 ASP Webforms应用程序，我使用来自Bootstrap的模式进行设置。

<asp:Button CssClass="btn btn-default" data-toggle="modal" data-target="#myModal" OnClientClick="return false;" runat="server" Text="Einstellungen" />

正如您所看到的，我已经不得不阻止Button进行回发。因为如果我单击按钮，Modal会打开，回发开始，模态关闭。

所以我修复了这个问题。

但是现在如果我打开模态并想单击此模态中的按钮：

 <asp:Button runat="server" ID="dropbox" Text="Mit Dropbox anmelden" CausesValidation="false" OnClick="dropboxButton" CssClass="btn btn-info" />

The Modal close ...但我希望用户看到他填写的Accountinformation。此外，我还有一个字段，用于在单击“+”按钮后添加条目。每次点击添加后，模态将被关闭......

我已尝试 data-backdrop =“static”以及使用Javascript和 e.preventDefault（）;

的内容

有什么想法吗？

Answer 1

为什么不试试这个

<asp:Button ID="btnSpareRequisition" CssClass="btn  btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#requestSpareModalId" OnClientClick="return  false"/>

这是我的完整代码

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
 <%-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>--%>
 <asp:Button ID="btnSpareRequisition" CssClass="btn  btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#myModal" OnClientClick="return  false" />
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

Answer 2

单击服务器端ASP.NET按钮控件将导致PostBack，您的页面将被重新加载，因此模式将被关闭。您可以做的是在click事件中调用下面的代码重新打开模式在点击事件之后：

代码背后：

protected void btnClickMe_Click(object sender, EventArgs e)
{
    lblTest.Text = DateTime.Now.ToString("dd MMM yyyy - HH:mm:ss");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}

<强> .ASPX：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        function showModal() {
            $('#myModal').modal('show');
        }

        $(function () {
            $("#btnShowModal").click(function () {
                showModal();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnShowModal" value="Show Modal" />
        <div id="myModal" class="modal fade"">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal popup</h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblTest" runat="server"></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnClickMe" runat="server" Text="Click Me" OnClick="btnClickMe_Click" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

防止从ASP NET按钮关闭Modal

2 个答案: