Iam using master page in asp.net.Jquery dialog has been used in content page.
a)Jquery reference included in master page.
b)Separate main.js has been created and included in content page.
when i click on the readmore(imgMDreadmore) image button jquery dialog not opening.
Please help me, how to open a jquery dialog in content page.
1) Master page
<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");
});
});
