Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

188 lines (157 sloc) 3.905 kB
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modialog examples</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.modialog.min.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
}
.dialog {
display: none;
width: 300px;
background-color: white;
border: 3px solid black;
border-radius: 5px;
}
.dialog .content {
padding: 20px;
}
.modialog-caption {
color: white;
height: 20px;
background-color: black;
}
.modialog-icon {
color: white;
width: 1em;
height: 1em;
float: right;
cursor: pointer;
font-weight: bold;
}
.modialog-overlay {
background-color: #AAA;
}
.dialog.cool {
background-color: black;
font-size: 120%;
font-weight: bold;
color: white;
text-align: center;
}
</style>
</head>
<body>
<p>
<a id="open0" href="#">Opens a very basic popup</a>
<div id="dialog0" class="dialog">
<div class="content">Hello!</div>
</div>
</p>
<p>
<a id="open01" href="#">Opens a very basic popup with a title</a>
<div id="dialog01" class="dialog">
<div class="content">Hello!</div>
</div>
</p>
<p>
<a id="open1" href="#">Opens a LOCKED popup (closes in 3 seconds)</a>
<div id="dialog1" class="dialog">
<div class="content">
Please wait 3 seconds...
</div>
</div>
</p>
<p>
<a id="open2" href="#">Opens a popup with a long content and close confirmation</a>
<div id="dialog2" class="dialog">
<div class="content">
Please wait
</div>
</div>
</p>
<p>
<a id="open3" href="#">No caption, no icon, super cool</a>
<div id="dialog3" class="dialog cool">
<div class="content">
I'm white on black...<br>Now wait 3 seconds
</div>
</div>
</p>
<script>
var $dlg0 = $('#dialog0');
$dlg0.modialog();
var $dlg01 = $('#dialog01');
$dlg01.modialog({title: "I'm a dialog box", closeWithClick: true});
var $dlg1 = $('#dialog1');
$dlg1.modialog({
locked: true,
});
var $dlg2 = $('#dialog2');
var $dlg3 = $('#dialog3');
$dlg3.modialog({
icon: ''
});
$dlg2.modialog({
onBeforeClose: function() {
return confirm("Are you sure?");
},
});
$('#open0').click(function() {
$dlg0.modialog('open');
return false;
});
$('#open01').click(function() {
$dlg01.modialog('open');
return false;
});
$('#open1').click(function() {
$dlg1.modialog('open', function() {
var $dlg = this;
setTimeout(function() {
$dlg.find('.content').html("Thank you!");
setTimeout(function() {
$dlg.modialog('close');
}, 1000);
}, 3000)
});
return false;
});
$('#open2').click(function() {
$dlg2.modialog('open', function() {
var $dlg = this;
setTimeout(function() {
$dlg.find('.content').html("\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
<p>Some paragraph</p>\
")
$dlg.modialog('center');
}, 1000)
});
return false;
});
$('#open3').click(function() {
$dlg3.modialog('open', function() {
var $dlg = this;
setTimeout(function() {
$dlg.modialog('close');
}, 3000)
});
})
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.