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 fix HAXM is not installed |in Android Studio
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
- This action cannot be completed because the file is open in SQL Server(SQLEXPRESS) - FIXED
- Unicode error 'unicodeescape' codec can't decode bytes in position 2-3: truncated UXXXXXXXX escape
- Could not find the 'angular-devkit/build-angular:dev-server' builder's node package | Angular Error
Related Article