Как открыть диалоговое окно jQuery с главной страницей ASP.NET

Я использую главную страницу в диалоговом окне asp.net.Jquery на странице содержимого. а) Ссылка Jquery включена в главную страницу. б) Отдельный main.js был создан и включен на страницу контента.

когда я нажимаю кнопку изображения для чтения (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, когда я нажимаю кнопку «Подробнее».


dialog jquery master
person Nag    schedule 31.05.2013    source источник
comment
вам следует сократить свои библиотеки до одной минимизированной библиотеки jqueryui в целом, поскольку у вас практически есть все, что они могут предложить, лол. ;   -  person Just-lewis    schedule 31.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

хорошо, это должно работать Пример 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');
                }
            }
        });
    });
});
person Just-lewis    schedule 31.05.2013
comment
Спасибо за ваш ответ. Невозможно вызвать эту функцию $(#MDdialogbox).dialog(open) в $(document).ready(function () { $([id*=imgMDreadmore]).click(function () { $(#MDdialogbox).dialog(open); }); }); - person Nag; 01.06.2013