对话框代码母版页答案

【问题标题】：DialogBox code Master Page对话框代码母版页
【发布时间】：2015-11-30 05:38:22
【问题描述】：

我有一个 asp.net 应用程序，我想在右上角显示“联系我们”链接。单击此链接按钮时，应该会打开一个弹出窗口，并且休息区应该是灰色的。

现在，要在应用程序的所有页面中显示联系我们，必须将其添加到母版页。下面是我试图修改的母版页代码，但不知何故对话框没有打开。当然是因为放置了 div。有人可以指导我吗？

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="mstMainPage.master.cs"
    Inherits="TestProj.Master.mstMainPage" %>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
    </style>
    <script language="javascript" type="text/javascript">
     $(function(){
            $("#btnContactUs").click(function() {

               ($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });

        function CloseWindow() {
            window.close();
        }
    </script>
</head>
<body style="margin-top: -5px; margin-left: -5px; margin-right: 0px; border-color: #79ACCA; border-width">
    <form id="form1" runat="server">
    <div>
        <!-- Main Panel -->
        <asp:Panel ID="Panel2" runat="server" Width="100%" Style="margin-left: 0px">
            <asp:Table runat="server" ID="tab1" Width="100%">
                <asp:TableRow>
                    <asp:TableCell Height="28px" Width="100%" BackColor="#79ACCA" HorizontalAlign="Right">
                         <asp:Button ID="btnContactUs" runat="server" Text="Contact Us" >
                        </asp:Button>
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>           
        </asp:Panel>
        <asp:Panel runat="server" CssClass="ContentMargin">
              <asp:ContentPlaceHolder ID="cphMSTMainPage" runat="server">
              </asp:ContentPlaceHolder>
        </asp:Panel>
         <div id="dialog-5" title="Dialog Title!">
            Click on the Toggle button to open and close this dialog box.
         </div>
    </div>
    </form>
</body>
</html>

【问题讨论】：

你有什么异常吗？？
没有。当我点击联系我们时，它只是重新加载页面。
在按钮单击时发出警报消息并检查您的按钮单击是否有效。
您可以通过在按钮上设置UseSubmitBehavior = false 来停止提交表单并避免回发，否则我添加了一个答案，您可以尝试一下。

标签： jquery asp.net jquery-ui jquery-ui-dialog

【解决方案1】：

如果页面重新加载导致此问题，请尝试这种方式。

Aspx 标记：

<asp:Button ID="btnContactUs" runat="server" Text="Contact Us" CssClass="LogOff" OnClientClick="OpenDialog(this);return false;"></asp:Button>

Javascript：

function OpenDialog(jObj) {
    ($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open"): $("#dialog-5").dialog("close");
}

【讨论】：

在开发者控制台中检查元素 div 下的交叉检查，id dialog-5 在 dom 中可用？

【解决方案2】：

对于未来的访问者......主页面和内容页面的解决方案是在open 或create 对话框初始化中添加重新定位代码行。

function (evt) {    // @open
    $(this).parent().appendTo("form");
}

这会将对话框移回表单元素内

【讨论】：