我在同一页面上有两个模态菜单：用于注册和登录。当首先出现时，第二个应该从页面消失而不与第一个重叠。我怎么能用bootstrap或bootstrap＆amp; amp; jQuery的？
第一个菜单：
<div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Login</h1>
<ul id="socail-media-sign-in" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
<a href="https://www.facebook.com/dialog/oauth?client_id=1419289624970295&redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dfacebook&response_type=code&scope=email,user_birthday" title="Login using Facebook">Facebook</a>
</li>
<li class="vk">
<a href="http://oauth.vk.com/authorize?display=page&client_id=4012134&scope=offline,email,friends&redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dvk&response_type=code" title="Login using VK">Vkontakte</a>
</li>
<li class="ok last">
<a href="http://www.odnoklassniki.ru/oauth/authorize?client_id=201782528&response_type=code&redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dodnoklassniki" title="" data-original-title="Login using OK">Odnoklassniki</a>
</li>
</ul>
<p class="line">or</p>
<form action="https://site.ru/wp-login.php" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkAjaxLogin" id="form_login" autocomplete="off" novalidate="novalidate">
<input type="hidden" id="sign-in-return" name="sign-in-return" value="%2F">
<div class="form-group">
<input class="form-control needed" type="email" name="log" id="login_user_email" placeholder="E-mail" data-rule-required="true" data-rule-email="true" aria-required="true">
</div>
<div class="form-group">
<input class="form-control needed" type="password" name="pwd" id="login_user_password" placeholder="Password" data-rule-required="true" aria-required="true">
</div>
<div class="form-group">
<input type="submit" value="Войти" name="dd" class="btn btn-primary btn-block">
</div>
</form>
<p class="text-center"><a rel="nofollow" href="#dialog-password-reset-toggler" id="dialog-password-reset-toggler" class="text-muted" title="Сбросить забытый пароль"><small>Забыли пароль?</small></a></p>
<p class="text-center"><a rel="nofollow" href="#dialog-sign-up" class="underline" id="dialog-sign-up-toggler">Зарегистрироваться</a></p>
<p class="text-muted text-center" style="margin-bottom: 0;">Говорят, Усейн Болт регистрируется <br>за 4,5 секунды</p>
</div>
</div>
</div>
</div>
第二个：
<div id="dialog-sign-up" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Sign up</h1>
<ul id="socail-media-sign-up" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
<a href="https://www.facebook.com/dialog/oauth?client_id=1419289624970295&redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dfacebook&response_type=code&scope=email,user_birthday" title="Login using Facebook">Facebook</a>
</li>
<li class="vk">
<a href="http://oauth.vk.com/authorize?display=page&client_id=4012134&scope=offline,email,friends&redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dvk&response_type=code" title="Login using VK">Vkontakte</a>
</li>
<li class="ok last">
<a href="http://www.odnoklassniki.ru/oauth/authorize?client_id=201782528&response_type=code&redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dodnoklassniki" title="" data-original-title="Login using OK">Odnoklassniki</a>
</li>
</ul>
<p class="line">or</p>
<form action="/registration" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkRegistration" id="form_register" novalidate="novalidate">
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-email="true" type="email" name="user_login" id="user_email" placeholder="E-mail" aria-required="true">
</div>
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-minlength="6" type="password" name="user_password" id="pass1" placeholder="Password" aria-required="true">
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_firstname" id="first_name" placeholder="First name" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_lastname" id="last_name" placeholder="Last name" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input readonly="readonly" class="form-control datetime" data-rule-required="true" data-view-mode="2" type="text" name="user_birthday" id="user_birthday" placeholder="Год рождения" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<div class="select2-container form-control select2" id="s2id_user_sex"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-1">Sex</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen1" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen1_search" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-1"> </ul></div></div><select class="form-control select2 select2-offscreen" data-rule-required="true" data-rule-min="1" data-placeholder="Пол" name="user_sex" id="user_sex" data-minimum-results-for-search="-1" tabindex="-1" title="" aria-required="true">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="wp-submit" value="Sign up" class="btn btn-primary btn-block" disabled="">
</div>
<p class="text-center" style="margin-bottom: 0;"><a rel="nofollow" href="#dialog-sign-in" class="underline" id="dialog-sign-in-toggler">Login</a></p>
<div style="color: #ccc; padding-top: 10px;" class="text-center">
By signing up you agree with <a href="/wp-content/uploads/docs/eula.docx" style="color: #ccc">our Terms&Conditions</a>
</div>
</form>
</div>
</div>
</div>
</div>
更新
我为此编写了一个jQuery代码段，但它已停止正常工作（点击时没有反应）。
网址链接：
<div onclick="location.href='#dialog-sign-in';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_login.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 15px; padding-top: 12px;">
<a href="#dialog-sign-in" data-toggle="modal" data-target="#dialog-sign-in" style="font-size: 16px; color: #fff; border-bottom: 0px; line-height: 16px;">Login</a>
</div>
</div>
<div onclick="location.href='#dialog-sign-up';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_reg.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; margin-right: 20px; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 25px; padding-top: 12px;">
<a href="#dialog-sign-up" data-toggle="modal" data-target="#dialog-sign-up" style="font-size: 16px; color: #fff; border-bottom: 0px; line-height: 16px;">Sign up</a>
</div>
</div>
jQuery代码：
<script>
jQuery(function( $ ) {
var $dialogSignIn = jQuery('#dialog-sign-in'),
$dialogSignUp = jQuery('#dialog-sign-up'),
$dialogPasswordReset = jQuery('#dialog-password-reset'),
$dialogSignUpToggler = jQuery('#dialog-sign-up-toggler'),
$dialogSignInToggler = jQuery('#dialog-sign-in-toggler'),
$dialogPasswordResetToggler = jQuery('#dialog-password-reset-toggler');
$dialogSignUpToggler.click(function( event ) {
event.preventDefault();
$dialogSignIn.modal('hide');
$dialogSignUp.modal('show');
});
$dialogSignInToggler.click(function( event ) {
event.preventDefault();
$dialogSignUp.modal('hide');
$dialogSignIn.modal('show');
});
});
</script>
似乎代码是正确的。为什么它不起作用？
答案 0 :(得分：3)
$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
但是你需要写一点点javascript才能使它正常工作，但它基本上归结为这种方法。