如何在屏幕上出现另一个引导程序时隐藏另一个引导程序的模式
How to hide one Bootstrap's modal when other appears on screen?
我在同一页面上有两个模式菜单：用于注册和登录。当第一个出现时，第二个应该从页面中消失，而不是与第一个重叠。如何使用bootstrap或bootstrap&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>
j查询代码：
<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>
似乎代码是正确的。为什么它不起作用？
$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
但是，您需要编写一些 javascript 才能正常工作，但它基本上归结为此方法。
相关文章：
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- 如何从浏览器中获取cookie，从另一个应用程序中删除
- 从另一个应用程序启动一个MobileFirst应用程序，并在活动启动后接收活动
- 如何将消息从 chrome 扩展程序发送到另一个扩展程序
- 如果 Chrome 扩展程序崩溃，如何让另一个扩展程序重新加载崩溃的扩展程序
- Meteor.js:如何将一个帮助程序的数据上下文传递给另一个帮助程序
- 从另一个 JavaScript 程序调用 javascript 文件
- 如何在屏幕上出现另一个引导程序时隐藏另一个引导程序的模式
- 从一个 Angularjs 应用程序中从另一个应用程序调用函数
- ExtJS在面板中加载另一个应用程序
- 需要一个引导程序进度条.有人能帮我吗
- 从另一个javascript程序调用函数-函数式编程
- 如何开始旋转一个引导程序字体真棒图标，然后用jQuery停止它
- forever js正在停止另一个应用程序
- 如何从URL收集信息并在另一个应用程序中解码它
- 从另一个应用程序访问javascript文件
- 根据一个处理程序添加另一个处理程序
- 没有发布Twilio.尝试为另一个应用程序设置新设备时的设备实例
- 在Windows Phone上，如何启动另一个应用程序
- Onchange引导程序日期选择器更改另一个引导程序日期选取器的值
