如何使用jQuery显示隐藏和显示模式弹出

Question

我正在使用这个插件http://www.jqueryscript.net/demo/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions/#创建模式弹出显示两种形式-登录和注册。顶部菜单栏中的链接(登录/注册)是一个触发器。不过，我希望一次只显示一份表格。因此，我使用下面的jQuery将一个表单(div)替换为另一个表单。

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

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

这是完美的工作。当我单击在登录表单中创建一个帐户链接时，它将被替换为注册表单。但问题是，当我关闭注册表单(#2)时，它会消失，但是当我再次单击导航菜单时，登录表单就不会出现了。相反，它需要重新加载页面，然后弹出窗口才能工作。

​

​

无论如何，作为解决方案，我可以不需要加载页面就可以实现这一点。谢谢

Answer 1

我不知道我是否理解你到底想要什么，但是，我用你的插件做了一个完整的例子:告诉我你是否需要更多的解释。

​

$(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>

​