In this article I will show you how to create a modal pop up window (like the one shown below) within a few minutes. In the example shown below, when you click a button, a window will appear that will block out rest of the screen. You have to close this window to be able to interact with the main screen.
Screen before clicking the button:
Screen after clicking the button:
To follow the example below you will need to download the following two javascript libraries and one css file
1> jquery-1.4.1.min.js
2>jqModal.js
3>jqModal.css
Once you have these three files copy the .js files into a folder called Scripts. Copy the css to a folder called Styles. Then copy paste the html below into a file with .html extension.
This is how your final folder structure would look like.
Now you're good to go. Play around with the div tag with id=modalWindow to customize it to your needs.
To show a simple modal box (where background is NOT grayed out) use
var features="edge:sunken;scroll:no;status:no;unadorned:yes;help:no; ";
var url = ....
window.showModalDialog(url ,"" , features);
Screen before clicking the button:
To follow the example below you will need to download the following two javascript libraries and one css file
1> jquery-1.4.1.min.js
2>jqModal.js
3>jqModal.css
Once you have these three files copy the .js files into a folder called Scripts. Copy the css to a folder called Styles. Then copy paste the html below into a file with .html extension.
<html>
<head>
<title>Modal window</title>
<script type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript"
src="Scripts/jqModal.js"></script>
<link href="Styles/jqModal.css"
rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
$(document).ready(function () {
$("#modalWindow").jqm({
onShow: jqModalShowHandler,
onHide: jqmHideModalHandler,
modal: true
});
$("#btnShow").click(btnShowClick);
function btnShowClick() {
$("#modalWindow").jqmShow();
}
function jqModalShowHandler() {
$('#modalWindow').show();
}
function
jqmHideModalHandler(e) {
e.w.hide(); // Hide window
e.o.remove(); // Remove overlay
}
});
</script>
</head>
<body>
<input id="btnShow"
type="button"
value="Click Me to
see modal" />
<div class="Medium
jqmWindow" id="modalWindow" style="display: none">
<a class="jqmClose
modal_tools_close" style="float: right;" href="#">X</a>
<div class="modalContent">
<br />
<br />
<br />
<br />
<br />
This is a modal window
</div>
</div>
</body>
</html>
Now you're good to go. Play around with the div tag with id=modalWindow to customize it to your needs.
Show a modal window with javascript
var features="edge:sunken;scroll:no;status:no;unadorned:yes;help:no; ";
var url = ....
window.showModalDialog(url ,"" , features);
No comments:
Post a Comment
Comments will appear once they have been approved by the moderator