In this article I will show you how to use fadeout using jQuery. You can control animation duration using argument to specify in integer (milliseconds) .If you set fadeout delay duration as 0 milliseconds it will disable the animation effect. The callback function should be executed after the animation ends. When the user clicks the OK button event fires, the dialog box disappears and removed from the DOM.
Syntax:
jQuery(elements).fadeOut([duration], [callback]);
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$("#overlay button").click(function () {
$("#overlay").fadeOut(5000, function () {
$(this).remove();
});
});
});
</script>
<style type="text/css">
#dialog {
background-color: #fff;
width: 300px;
padding: 10px;
font: normal 14px "Nimbus Sans L", "Helvetica Neue", "Franklin Gothic Medium", Sans-serif;
border: 1px solid #aaa;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 2px 2px 5px #000;
-webkit-box-shadow: 2px 2px 5px #000;
box-shadow: 2px 2px 5px #000;
}
#dialog:after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
#dialog header {
display: block;
padding-bottom: 5px;
margin-bottom: 10px;
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #aaa;
}
#dialog footer {
display: block;
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #aaa;
}
#dialog button {
float: right;
}
</style>
<body>
<div id="overlay">
<div id="dialog">
<header>Dialog box</header>
Lorem ipsum etc, etc.
<footer>
<button>Ok</button></footer>
</div>
</div>
</body>
Output:
Post your comments / questions
Recent Article
- How to decode HTML character code in c#?
- How to save the xml file to a particular location?
- How to use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
Related Article