DialogBox代码母版页

时间:2015-11-30 05:38:23

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

我有一个asp.net应用程序,在右上角我想显示“联系我们”链接。点击此链接按钮后,应打开一个弹出窗口,休息区域应显示为灰色。

现在,要在所有应用程序页面中显示Contact US,必须将其添加到母版页。下面是我试图修改的母版页代码,但不知何故对话框没有打开。当然由于放置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>

2 个答案:

答案 0 :(得分:1)

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

Aspx Markup:

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

答案 1 :(得分:0)

对于未来的访问者....使用Master和Content Pages的解决方案是在opencreate对话框初始化中添加重新定位的代码行。

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

这会将对话框移回Form元素