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 hide the ID field from the Django admin?
- It is impossible to add a non nullable field without specifying a default. Django error
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
- ModuleNotFoundError: No module named 'openpyxl' - Python
- How to get thumbnail from vimeo video URL in Python?
Related Article