模态弹出按钮只能工作一次

时间：2018-01-22 06:29:30

标签： jquery html asp.net webforms bootstrap-modal

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

提前致谢。

我的代码 

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

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

此代码正常工作

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>

在末尾添加脚本标记

答案 2 :(得分：0)

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

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

您可以通过添加类来清空您的密码字段，例如＆＃34; pass＆＃34;他们如上所示清空他们的价值观。

答案 3 :(得分：0)

在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");
        });

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

相关问题
最新问题