如何在asp.net中打开模式弹出窗口

How to open a modal poppup window in asp.net?

本文关键字：模式 窗口 asp net      更新时间：2023-09-26

这是我的java脚本代码：

    <script> 
    $('#<%= btnOpen.ClientID %>').click(function (e) { 
    e.preventDefault();
    $('#content').modal({ onOpen: function (dialog) { 
     dialog.overlay.fadeIn('slow', function () { 
      dialog.data.hide();
      dialog.container.fadeIn('slow', function () { 
      dialog.data.slideDown('slow'); 
     }); 
    }); 
   }, 
   onClose: function (dialog) { 
    dialog.data.fadeOut('slow', function () { 
     dialog.container.slideUp('slow', function () { 
      dialog.overlay.fadeOut('slow', function () { 
       $.modal.close(); // must call this! 
       }); 
      }); 
     }); 
    }  
  }); 
 </script>

还有我的按钮

  <td> 
   <asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" /> 
  </td>

在这种情况下，点击按钮，只有页面会刷新

您尝试过这个链接吗：http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co

<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:button id="Button1" runat="server" text="Button" />
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server"

cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
targetcontrolid="Button1" popupcontrolid="Panel1" 
popupdraghandlecontrolid="PopupHeader" drag="true" 
backgroundcssclass="ModalPopupBG">
</cc1:modalpopupextender>
<asp:panel id="Panel1" style="display: none" runat="server">
<div class="HellowWorldPopup">
            <div class="PopupHeader" id="PopupHeader">Header</div>
            <div class="PopupBody">
                <p>This is a simple modal dialog</p>
            </div>
            <div class="Controls">
                <input id="btnOkay" type="button" value="Done" />
                <input id="btnCancel" type="button" value="Cancel" />
    </div>
    </div>

尝试限制回发：

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" OnClientClick="return false;" />

我建议在文档就绪语句中添加

<script>
$(document).ready(function(e){
    //rest of your script here
});
</script>

另一件需要提及的事情是如果您知道按钮的特定id，请将其作为引用

$('#btnOpen').click(function(e){
    e.preventDefault();
    //rest of your script here
});

最终结果：

<script>
    $(document).ready(function(){
        $('#btnOpen').click(function(e){
            e.preventDefault();
            if(!HttpContext.Current.Session["UserID"]){
                //userID exists show form code
                //rest of original code here
            } else {
                //do something else or nothing
            }
        });
    });
</script>
<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static"/>
相关文章：