Javascript 如何隐藏一个引导'；当屏幕上出现“其他”时，是什么模式？_Javascript_Jquery_Css_Twitter Bootstrap_Twitter Bootstrap 3

Javascript 如何隐藏一个引导'；当屏幕上出现“其他”时，是什么模式？

javascript jquery css twitter-bootstrap twitter-bootstrap-3

Javascript 如何隐藏一个引导'；当屏幕上出现“其他”时，是什么模式？,javascript,jquery,css,twitter-bootstrap,twitter-bootstrap-3,Javascript,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 3,我在同一页上有两个模式菜单：用于注册和登录。当第一个出现时，第二个应该从页面中消失，而不是与第一个重叠。如何使用bootstrap或bootstrap&jQuery实现这一点第一个菜单： <div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;"> <div class="modal-dialog" style="width: 320px;">

我在同一页上有两个模式菜单：用于注册和登录。当第一个出现时，第二个应该从页面中消失，而不是与第一个重叠。如何使用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&amp;redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dfacebook&amp;response_type=code&amp;scope=email,user_birthday" title="Login using Facebook">Facebook</a>
                    </li>
                    <li class="vk">
                        <a href="http://oauth.vk.com/authorize?display=page&amp;client_id=4012134&amp;scope=offline,email,friends&amp;redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dvk&amp;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&amp;response_type=code&amp;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&amp;redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dfacebook&amp;response_type=code&amp;scope=email,user_birthday" title="Login using Facebook">Facebook</a>
                    </li>
                    <li class="vk">
                        <a href="http://oauth.vk.com/authorize?display=page&amp;client_id=4012134&amp;scope=offline,email,friends&amp;redirect_uri=https%3A%2F%2Fsite.ru%2Faccess%3Fprovider%3Dvk&amp;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&amp;response_type=code&amp;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代码段，但它停止正常工作（单击时没有反应）

URL链接：

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


jQuery（函数（$）{
var$dialogSignIn=jQuery（“#对话框登录”），
$dialogSignUp=jQuery（“#dialogSignUp”），
$dialogPasswordReset=jQuery（“#dialogPasswordReset”），
$dialogSignUpToggler=jQuery（“#dialogSignUpToggler”），
$DialogSigningToggler=jQuery（“#对话框登录切换程序”），
$dialogPasswordResetToggler=jQuery（“#dialogPasswordResetToggler”）；
$dialogSignUpToggler.单击（函数（事件）{
event.preventDefault（）；
$dialogSignIn.modal（'hide'）；
$dialogSignUp.modal（'show'）；
});
$DialogSigningToggler.单击（函数（事件）{
event.preventDefault（）；
$dialogSignUp.modal（'hide'）；
$dialogSignIn.modal（'show'）；
});
});

代码似乎是正确的。为什么它不起作用

$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');

不过，您需要编写一点javascript，使其正常工作，但基本上可以归结为这种方法

但是，您需要编写一点javascript，它才能正常工作，但它基本上就是这种方法。

我尝试过，但它停止了正常工作，点击时没有反应，正如您在上面看到的……我尝试过，但它停止了正常工作，点击时没有反应，正如你在上面看到的…我试过了，但它停止正常工作，点击时没有反应，正如你在上面看到的…我试过了，但它停止正常工作，点击时没有反应，正如你在上面所看到的…在这里很好：但是我删除了元素：

在这里很好：但是我删除了元素：在这里很好：但是我删除了元素：在这里很好：但是我删除了元素：