How to Show Hide and Show modal popups using jQuery

2 Views

I am using this plugin http://www.jqueryscript.net/demo/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions/# to create modal pop-ups to show two forms – Login and Register. A link (Login/Register) in the top menu bar is a trigger. However, I wish to show one form at a time. So,I am using the following the jQuery to replace one form (div) with another. 

//popup1 is the Login form
//pupup2 is the registration form

$("#create-acct").click(function(){
        $('#popup1').replaceWith($('#popup2'));
        });

And this is working perfect. When I click Create an account link in the login form, it’s being replaced with the registration form. But the problem is when I close Registration form (#popup2), it’s going away but when I again click the nav menu Login/Register, the login form does not appear. Instead, it takes a page reload and then the popups work.

Read More

enter image description here

Anyway solution as how I can achieve this without a page load. Thanks

Post Views: 2

Related posts

1 comment

  1. 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

    $(function(){

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

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

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

$(document ).ready(function(e) {
  $(document).on("click",".openRegister",function(e) {
      e.preventDefault();
      $('#popup .modal-body').html($('#loginContent').html());
	});
  $(document).on("click",".openLogin",function(e) {
      e.preventDefault();
      $('#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"> 
  <header>
    <a href="#" class="js-modal-close close">×</a>
    <h3><a href="http://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Title</h3>
  </header>
  <div class="modal-body">
    <p>Login Body</p>
    <a href="#" class="openRegister">Register</a>
  </div>
  <footer>
    <a href="#" class="js-modal-close">Close Button</a>
  </footer>
</div>


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

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

	<a class="js-open-modal" href="#" data-modal-id="popup"> Click me </a>

Comments are closed.