我正在使用这个插件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'));
});
这是完美的工作。当我单击登录表单中的创建帐户链接时，它将被替换为注册表单。但是问题是当我关闭注册表单（#popup2）时，它会消失，但是当我再次单击导航菜单登录/注册时，登录表单不会出现。相反，它需要重新加载页面，然后弹出窗口工作。
无论如何，解决方案是如何在不加载页面的情况下实现这一点。谢谢
我不知道我是否完全理解你想要什么，但是，我用你的插件做了一个完整的工作示例：告诉我你是否需要更多的解释
$(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>