模态弹出按钮只能使用一次

Question

我有一个 webform 项目，其中包括使用 Jquery 的 bootsrap 模态弹出窗口。单击按钮时，我的模态弹出窗口可以工作，但是当我关闭模态弹出窗口并再次单击按钮时，它不起作用。它只能工作一次.我的错误是什么？我在下面添加了我的代码。请帮助我解决我的问题。

提前致谢。

我的代码

$(document).ready(function() {
  $("#btn_SifreDegistir").click(function(event) {
    $('#passwordModal').modal('show');
  });
  $('#passwordModal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
    $(this).empty();
    $(this).removeAttr('style');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<form id="form1" runat="server">
  <asp:HiddenField ID="Hidden1" runat="server" />
  <div class="container">
    <div class="jumbotron">
      <h5>Merhaba
        <asp:Label ID="lblKullaniciAdi" runat="server" ForeColor="Red" /> </h5>
      <h5>
        <asp:LinkButton ID="btnLogOut" runat="server" ForeColor="Red" CssClass="pull-right" OnClick="btnLogOut_Click" Font-Underline="True">Log Out</asp:LinkButton>
      </h5>
      <h1>Raporlar</h1>
    </div>
    <div style="float:right">
      <asp:ScriptManager runat="server" ID="sm">
      </asp:ScriptManager>
      <asp:updatepanel runat="server">
        <ContentTemplate>
          <asp:Button ID="btn_SifreDegistir" class="btn btn-primary" runat="server" OnClick="btn_SifreDegistir_Click" Text="Şifre Değiştir" />
          <p />
        </ContentTemplate>
      </asp:updatepanel>
      <div class="modal fade" runat="server" data-keyboard="false" data-backdrop="static" id="passwordModal" tabindex="-1">
        <div class="modal-dialog">
          <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
              <div class="modal-content">
                <div class="modal-header">
                  <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Şifre Değiştirme</h4>
                </div>
                <div class="modal-body">
                  <div class="form-group" style="display: inline-block;width:340px">
                    <label for="inputPassword">Şifreniz</label>
                    <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" style="width:100%;" />
                  </div>
                  <asp:Label ID="lblSifre" runat="server" style="color:red;display:inline-block;" Text="Merhaba" />
                  <div class="form-group" style="display: inline-block;width:340px">
                    <label for="inputNewPassword">Yeni Şifreniz</label>
                    <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" style="width:100%;" />
                  </div>
                  <asp:Label ID="lblYeniSifre" runat="server" style="color:red;display:inline-block;" />
                  <div class="form-group" style="display: inline-block;width:340px">
                    <label for="inputNewPasswordControl">Yeni Şifreniz Tekrar</label>
                    <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordControl" style="width:100%;" />
                  </div>
                  <asp:Label ID="lblYeniSifreKontrol" runat="server" style="color:red;display:inline-block;" />
                </div>
                <div class="modal-footer">
                  <asp:Button ID="btn_PasswordChange" class="btn btn-primary" runat="server" OnClick="btn_PasswordCange_Click" Text="Değiştir" />
                  <asp:Button ID="btn_PasswordClose" class="btn btn-primary" runat="server" data-dismiss="modal" aria-hidden="true" Text="Kapat" />
                </div>
              </div>
            </ContentTemplate>
          </asp:UpdatePanel>
        </div>
      </div>
</form>

Answer 1

删除这个$(this).empty();

$(document).ready(function() {
  $("#btn_SifreDegistir").click(function(event) {
    $('#passwordModal').modal('show');
  });
  $('#passwordModal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
    //$(this).empty();
    $(this).removeAttr('style');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<form id="form1" runat="server">
  <asp:HiddenField ID="Hidden1" runat="server" />
  <div class="container">
    <div class="jumbotron">
      <h5>Merhaba
        <asp:Label ID="lblKullaniciAdi" runat="server" ForeColor="Red" /> </h5>
      <h5>
        <asp:LinkButton ID="btnLogOut" runat="server" ForeColor="Red" CssClass="pull-right" OnClick="btnLogOut_Click" Font-Underline="True">Log Out</asp:LinkButton>
      </h5>
      <h1>Raporlar</h1>
    </div>
    <div style="float:right">
      <asp:ScriptManager runat="server" ID="sm">
      </asp:ScriptManager>
      <asp:updatepanel runat="server">
        <ContentTemplate>
          <asp:Button ID="btn_SifreDegistir" class="btn btn-primary" runat="server" OnClick="btn_SifreDegistir_Click" Text="Şifre Değiştir" />
          <p />
        </ContentTemplate>
      </asp:updatepanel>
      <div class="modal fade" runat="server" data-keyboard="false" data-backdrop="static" id="passwordModal" tabindex="-1">
        <div class="modal-dialog">
          <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
              <div class="modal-content">
                <div class="modal-header">
                  <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Şifre Değiştirme</h4>
                </div>
                <div class="modal-body">
                  <div class="form-group" style="display: inline-block;width:340px">
                    <label for="inputPassword">Şifreniz</label>
                    <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" style="width:100%;" />
                  </div>
                  <asp:Label ID="lblSifre" runat="server" style="color:red;display:inline-block;" Text="Merhaba" />
                  <div class="form-group" style="display: inline-block;width:340px">
                    <label for="inputNewPassword">Yeni Şifreniz</label>
                    <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" style="width:100%;" />
                  </div>
                  <asp:Label ID="lblYeniSifre" runat="server" style="color:red;display:inline-block;" />
                  <div class="form-group" style="display: inline-block;width:340px">
                    <label for="inputNewPasswordControl">Yeni Şifreniz Tekrar</label>
                    <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordControl" style="width:100%;" />
                  </div>
                  <asp:Label ID="lblYeniSifreKontrol" runat="server" style="color:red;display:inline-block;" />
                </div>
                <div class="modal-footer">
                  <asp:Button ID="btn_PasswordChange" class="btn btn-primary" runat="server" OnClick="btn_PasswordCange_Click" Text="Değiştir" />
                  <asp:Button ID="btn_PasswordClose" class="btn btn-primary" runat="server" data-dismiss="modal" aria-hidden="true" Text="Kapat" />
                </div>
              </div>
            </ContentTemplate>
          </asp:UpdatePanel>
        </div>
      </div>
</form>

Answer 2

此代码有效

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

尝试属性

data-toggle="modal" data-target="#myModal

添加

<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>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <form name="test">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <input type="text"/>
                    <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>
    </form>
</div>

<script>
$('#myModal').on('hide.bs.modal', function () {
    $('#myModal').find('form')[0].reset();
})
</script>

在末尾添加脚本标签

Answer 3

尝试以与显示模式相同的方式隐藏模式（单击关闭按钮）：

  $('#btn_PasswordClose').on('click', function() {
     $('#passwordModal').modal('hide');
     $('.passes').val('');
  });

您可以通过向它们添加类（例如“passes”）并清空它们的值来清空密码字段，如上所示。

Answer 4

在 Asp.net MVC 中，对模态内容（模态头部和模态体）使用局部视图，一旦您点击按钮，它将移动到您之前创建的局部视图（在该粘贴模态代码上）。模态内容链接：“https://www.w3schools.com/bootstrap/bootstrap_modal.asp”

1) 将此添加到您的第一页内容中

<div class="modal fade" id="previewApplicationForm1" tabindex="-1" aria-hidden="true">
</div>

JavaScript：

function previewPopUpForApplicationForm1() {
    $("#previewApplicationForm1").load('@Url.Action("PopUpForPreviewApplication1","Registration")',
        function () {
            $("#previewApplicationForm1").modal("show");
        });

点击提交按钮后，它将重定向到弹出页面。