Response title
This is preview!
problem with multiple ui dialog
in Using jQuery UI
•
9 years ago
hi everyone,
that's the code which i coded and there is a bug for multiple ui dialog kindly fix the bug and post here waiting for your replies
$(function(){
var options = {
autoOpen: false,
width: 'auto',
modal: true
};
var num = 1;
$(".dialog").each(function() {
var dlg = $('#all' + num).dialog(options);
$('#all' + num).click(function() {
dlg.dialog("open");
return false;
});
num = num + 1;
});
//getter
// Dialog
$('.dialog').dialog({
autoOpen: false,
width: 600,
});
// Dialog Link
$('.dialog_link').hover(function(){
$('.dialog').dialog('open');
return false;
});
$('.dialog_link').mouseout(function(){
$('.dialog').dialog('close');
return false;
});
//hover states on the static widgets
$('.dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
.dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
.dialog_link span.ui-icon {margin: -8px 5px 0 0;position: absolute;left: .2em;top: 50%;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
#datei{font-size:18px;width:50px;background:url(images/date_backg.png) no-repeat;text-align:center;font-weight:bold;float:left;min-height:53px;padding-top:3px; margin-right:15px; color: #216d9c;/*background:url(images/date_backg.png) no-repeat; width:50px;*/ height:90px; float:left;}
#bbcontent{margin-left:20px;}
</style>
</head>
<body>
<div id="all">
<p><a href="#all1" class="dialog_link" ><h2>Good morning</h2></a></p>
<div id="all1" class="dialog" title="Dialog Title">
<p><div id="datei"><span class="date">24 <br />Oct</span>
</div><div id="bbcontent">i am john cena
<br>123456
<br>7896542</p>
</div></div>
<p><a href="#all2" class="dialog_link" ><h2>Good Day</h2></a></p>
<div id="all2" class="dialog" title="Dialogs">
<p><div id="datei"><span class="date">24 <br />Oct</span>
</div><div id="bbcontent">Hello World</p>
</div></div>
</div>
</body>
</html>
that's the code which i coded and there is a bug for multiple ui dialog kindly fix the bug and post here waiting for your replies
$(function(){
var options = {
autoOpen: false,
width: 'auto',
modal: true
};
var num = 1;
$(".dialog").each(function() {
var dlg = $('#all' + num).dialog(options);
$('#all' + num).click(function() {
dlg.dialog("open");
return false;
});
num = num + 1;
});
//getter
// Dialog
$('.dialog').dialog({
autoOpen: false,
width: 600,
});
// Dialog Link
$('.dialog_link').hover(function(){
$('.dialog').dialog('open');
return false;
});
$('.dialog_link').mouseout(function(){
$('.dialog').dialog('close');
return false;
});
//hover states on the static widgets
$('.dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
.dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
.dialog_link span.ui-icon {margin: -8px 5px 0 0;position: absolute;left: .2em;top: 50%;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
#datei{font-size:18px;width:50px;background:url(images/date_backg.png) no-repeat;text-align:center;font-weight:bold;float:left;min-height:53px;padding-top:3px; margin-right:15px; color: #216d9c;/*background:url(images/date_backg.png) no-repeat; width:50px;*/ height:90px; float:left;}
#bbcontent{margin-left:20px;}
</style>
</head>
<body>
<div id="all">
<p><a href="#all1" class="dialog_link" ><h2>Good morning</h2></a></p>
<div id="all1" class="dialog" title="Dialog Title">
<p><div id="datei"><span class="date">24 <br />Oct</span>
</div><div id="bbcontent">i am john cena
<br>123456
<br>7896542</p>
</div></div>
<p><a href="#all2" class="dialog_link" ><h2>Good Day</h2></a></p>
<div id="all2" class="dialog" title="Dialogs">
<p><div id="datei"><span class="date">24 <br />Oct</span>
</div><div id="bbcontent">Hello World</p>
</div></div>
</div>
</body>
</html>
1