Overlay modal using jquery hide and show

Overlay modal using jquery hide and show

By : bill zhou
Date : November 18 2020, 03:49 PM
hope this fix your issue I want to do an overlay for my post content, like a 'full-screen modal dialog'. I've stuck at hiding and showing my content and items. I want when the content is shown, the items will become invisible. , Create an overlay div
code :
<div class="overlay"></div>
.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: 100;
    background: black;
$(function () {
    $('.item').on('click', function () {
        $('.item, .content').hide();
        $(this).next('.content').css('display', 'block');

    $('.close-content').on('click', function () {
        $('.content, .overlay').hide();


Share : facebook icon twitter icon
jQuery Modal + .show() and .hide()

jQuery Modal + .show() and .hide()

By : Ben Fertig
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Apply a css overflow:hidden rule to the modal. It should force any scroll bars to go away.
code :
#modal { overflow: hidden; }
Show and Hide overlay using jquery

Show and Hide overlay using jquery

By : Azby Luthfan
Date : March 29 2020, 07:55 AM
I wish this helpful for you Check this fiddle: http://jsfiddle.net/HfKTA/1/ - Guess this is what you are looking for.
Updated fiddle with multiple triggers: http://jsfiddle.net/HfKTA/2/
jQuery - Show and Hide a Modal

jQuery - Show and Hide a Modal

By : แซน' วิชช
Date : March 29 2020, 07:55 AM
Any of those help The problem in your example is, that both click events execute when you click 'open'. Thus it will open and then close immediately.
To fix it, just add event.stopPropagation() to your 'open' click handler. This will prevent the click event from bubbling to the .main-content.
code :
$('.open').on('click', function(ev){
    $('.modal').animate({ 'marginTop': '0px' }, 500);
How to Show Hide and Show modal popups using jQuery

How to Show Hide and Show modal popups using jQuery

By : akhil sura
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I dont know if I understand exactly what you want but, I did a full working exemple using your plugin : Tell me if you need more explanations
code :

var appendthis =  ("<div class='modal-overlay js-modal-close'></div>");

  $('a[data-modal-id]').click(function(e) {
    $(".modal-overlay").fadeTo(500, 0.7);
    var modalBox = $(this).attr('data-modal-id');
    $('#popup .modal-body').html($('#registerContent').html());
$(".js-modal-close, .modal-overlay").click(function() {
  $(".modal-box, .modal-overlay").fadeOut(500, function() {

$(window).resize(function() {
    top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
    left: ($(window).width() - $(".modal-box").outerWidth()) / 2

$(document ).ready(function(e) {
  $(document).on("click",".openRegister",function(e) {
      $('#popup .modal-body').html($('#loginContent').html());
  $(document).on("click",".openLogin",function(e) {
      $('#popup .modal-body').html($('#registerContent').html());
.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;

a.close {
  line-height: 1;
  font-size: 1.5em;
  position: absolute;
  top: 5%;
  right: 2%;
  text-decoration: none;
  color: #bbb;

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box"> 
    <a href="#" class="js-modal-close close">×</a>
    <h3><a href="http://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Title</h3>
  <div class="modal-body">
    <p>Login Body</p>
    <a href="#" class="openRegister">Register</a>
    <a href="#" class="js-modal-close">Close Button</a>

<div id="loginContent" style="display:none"> 
    <p>Register Body</p>
    <a href="#" class="openLogin">Login</a>

<div id="registerContent" style="display:none"> 
    <p>Login Body</p>
    <a href="#" class="openRegister">Register</a>

	<a class="js-open-modal" href="#" data-modal-id="popup"> Click me </a>
How to hide a modal and show another one using jquery?

How to hide a modal and show another one using jquery?

By : Sravani
Date : March 29 2020, 07:55 AM
Hope that helps My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Related Posts Related Posts :
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org