I run it on:
@Html.ActionLink("TEST", "About", "Home", null,
new { @class = "openDialog", data_dialog_id = "test"})
I show it like:
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 600,
height: 450
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
$(".ui-widget-overlay").live("click", function () { $("#data-dialog-id").dialog("close"); });
});
Last block of script should close dialog on overlay click (as I think) but it doesn’t work?
This is whole page when I open modal window:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="/Content/Common.css" rel="stylesheet" type="text/css">
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/get_html_text.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/global_constants.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/name_injection_builder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/number_injection_builder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/string_finder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/change_sink.js"></script><meta name="document_iterator.js"><meta name="find_proxy.js"><meta name="get_html_text.js"><meta name="global_constants.js"><meta name="name_injection_builder.js"><meta name="number_injection_builder.js"><meta name="string_finder.js"><meta name="change_sink.js"></head>
<body>
<div class="page">
<header>
<div class="searchCityBox">
<div id="logoBox" style="height: 25px; float: left;">
<a href="">
<img alt="logo" src="/Content/images/Logo.png">
</a>
</div>
<div style="margin-top: 2px; float: right;">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script>
function onItemSelect(item) {
//var siteRootUrl = 'localhost:51168';
window.location.href = item;
}
$(function () {
$("input#autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Navigation/Search', type: "POST", dataType: "json",
data: { searchTerm: request.term, maxResults: 10 },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Country.CountryCode + ':' + item.Name,
value: '/' + 'CityPage?country=' + item.Country.CountryCode + '&city=' + item.Name
//value: '/' + item.Country.CountryCode + '/' + item.Name
}
}))
}
})
},
select: function (event, ui) {
onItemSelect(ui.item.value);
}
});
});
</script>
<style>
#autocomplete
{
width: 250px;
font-size: 12px;
}
</style>
<div>
<input id="autocomplete" type="text" placeholder="City Search..." class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
</div>
<div style="margin-top: 2px; float: right;">
[ <a href="/login">Log On</a> ]
</div>
</div>
<nav>
</nav>
</header>
<section id="main">
<style>
.ui-dialog-titlebar
{
display: none;
}
</style>
<script>
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 600,
height: 450
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
$(".ui-widget-overlay").live("click", function () {
alert($("#data-dialog-id").size());
$(".dialog").dialog("close")
});
});
</script>
<p>
Welcome to , !
</p>
<a class="openDialog" data-dialog-id="test" href="/Home/About">TEST</a>
</section>
<footer>
</footer>
</div>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 600px; position: absolute; top: 110px; left: 379px; display: block; z-index: 1002; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-test"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-test"> </span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div class="dialog ui-dialog-content ui-widget-content" id="test" style="width: auto; min-height: 0px; height: 434px; ">
<meta charset="utf-8">
<title>About Us</title>
<link href="/Content/Common.css" rel="stylesheet" type="text/css">
<div class="page">
<header>
<div class="searchCityBox">
<div id="logoBox" style="height: 25px; float: left;">
<a href="">
<img alt="logo" src="/Content/images/MyCityNookLogo.png">
</a>
</div>
<div style="margin-top: 2px; float: right;">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<style>
#autocomplete
{
width: 250px;
font-size: 12px;
}
</style>
<div>
<input id="autocomplete" type="text" placeholder="City Search..." class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
</div>
<div style="margin-top: 2px; float: right;">
[ <a href="/login">Log On</a> ]
</div>
</div>
<nav>
</nav>
</header>
<section id="main">
<h2>About</h2>
<p>
Put content here.
</p>
</section>
<footer>
</footer>
</div>
</div><div class="ui-resizable-handle ui-resizable-n"></div><div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-w"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; "></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; "></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; "></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; "></div></div><div class="ui-widget-overlay" style="z-index: 1001; width: 1349px; height: 568px; "></div><ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul><ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1003; top: 0px; left: 0px; display: none; "></ul></body><span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span><object id="skype_plugin_object" location.href="http://localhost:51168/" location.hostname="localhost" style="position: absolute; visibility: hidden; left: -100px; top: -100px; " width="0" height="0" type="application/x-vnd.skype.click2call.chrome.5.6.0"></object></html>
Your selecting an id “data-dialog-id” but I don’t see where you set it on the link.
Change the following code in the last line from
to this
and it should probably work
Update:
Ok, I created a working jsfiddle here
The problem is your last line, you need to use $(“#test”) not $(“#data-dialog-id”)