Question

我在asp.net中使用母版页.Jetery对话框已在内容页面中使用。 a）Jfery引用包含在母版页中。 b）已创建单独的main.js并将其包含在内容页面中。

当我点击readmore（imgMDreadmore）图片按钮时，jquery对话框无法打开。

请帮我查看以下代码，如何在内容页面中打开jquery对话框。

1）母版页

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script src="Scripts/Jquery/jquery-1.9.1.js" type="text/javascript"></script>

    <link href="Scripts/Jquery/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/Jquery/themes/demos.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/Jquery/themes/vader/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/Jquery/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.tabs.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.tooltip.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-slide.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-explode.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-fold.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-highlight.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-pulsate.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-transfer.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.effect-fade.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/ui/jquery.ui.resizable.js" type="text/javascript"></script>
    <script src="Clock/jquery.thooClock.js" type="text/javascript"></script>
    <link href="Styles/masterMenu.css" rel="stylesheet" type="text/css" />
 </script>
 </head>
<body>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         </asp:ContentPlaceHolder>
</body>
</html>


2)Content page
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script src="Scripts/Javascript/main.js" type="text/javascript" language="javascript"></script>

<div id="maincontent">
    <div id="rightdiv">
        <div id="MDMsg">
            <div id="MD_corner" class="md_content">
                    <div id="MDmsg" style="height: 65%;">
                            <asp:Image ID="imgMDreadmore" ImageUrl="~/Images/main/readmorebut.png" runat="server" style="float:right;padding:5px;cursor:pointer;" height="25px" width="90px" />
                    </div>                
            </div>
            <!-- InVisible Message -->
            <div id="MDdialogbox">
                    <div id="Div1" style="height: 65%;">
                    Encouraging others to share your Google+ and site content expands your reach. Drive greater engagement with your company and your content by letting people see recommendations from friends and colleagues.
                    </div>                
            </div>
        </div>
        <div id="MDMsg1">
            <div id="Div5" class="birthday_header">
                <span class="bbf_header">Weather Report</span>
            </div>
            <div id="Div6" class="wr_content">

            </div>
        </div>
    </div>    

</div>
</asp:Content>

3) Main.js file

$("#MDdialogbox").dialog({
    open: function () { $(".ui-dialog-titlebar-close").hide(); },
    width: '910',
    height: '520',
    title: 'Ticket Details - On Hold',
    modal: true,
    show: {
        effect: 'fade',
        duration: 1500
    },

    buttons: {
        Ok: function () {
            $(this).dialog('close');
        }
    }
});

$(document).ready(function () {
    $("[id*=imgMDreadmore]").click(function () {
        $("#MDdialogbox").dialog("open");
    });
});

我试过几种方法，但我没有找到解决方案。如果有人知道如何解决这个问题。当我点击更多按钮时，请帮助我如何打开jquery对话框。

Answer 1

好的，这应该在小提琴中Example jsFiddle工作，我的宽度和高度更小，仅举例。快乐的编码。

$(document).ready(function () {
    $("#imgMDreadmore").click(function () {
        $("#MDdialogbox").dialog({
            open: function () { $(".ui-dialog-titlebar-close").hide(); },
            width: '910',
            height: '520',
            title: 'Ticket Details - On Hold',
            modal: true,
            show: {
                effect: 'fade',
                duration: 1500
            },

            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            }
        });
    });
});

如何使用ASP.NET母版页打开jQuery对话框

1 个答案: