求大神帮忙:bootstrap的登陆界面的触发问题

小轩1986 发布于 2015/09/27 14:55
阅读 757
收藏 0

之前做了个登陆界面,现在想改成用bootstrap做想问问怎么做?

代码如下:

<div ng-app="myApp" class="container">
            <div class="demo">
                <nav class="main_nav">
                    <ul>
                        <li><a class="cd-signin" href="#">登录</a></li>
                        <li><a class="cd-signup" href="#">注册</a></li>
                    </ul>
                </nav>
            </div>
            <div class="cd-user-modal" id="myModal"> 
                <div class="cd-user-modal-container">
                    <ul class="cd-switcher">
                        <li class="on"><a href="#">用户登录</a></li>
                        <li><a href="#">注册用户</a></li>
                    </ul>


                    <div id="cd-login" ng-controller="validateCtrl1"> <!-- 登录表单 -->
                        <form class="cd-form" name="myForm" ng-submit="save1()" novalidate>
                            <div class="fieldset">
                                <label class="image-replace cd-username" for="signin-username">用户名</label>
                                <input class="full-width has-padding has-border" name="user" id="signin-username" type="text" placeholder="输入用户名" ng-pattern="/[A-Z0-9a-z]/" ng-model="user"required> 
                                  <div class="errtxt" style="color:red" ng-show="myForm.errsubmitted1">
                                     <span ng-show="myForm.user.$error.required">用户名不能为空!</span>
                                     <span ng-show="myForm.user.$error.pattern">只能是英文字或数字</span>
                                  </div>
                            </div>
                            
                            <div class="fieldset">
                                <label class="image-replace cd-password" for="signin-password">密码</label>
                                <input class="full-width has-padding has-border" id="signin-password" type="password"  placeholder="输入密码" name="password" ng-model="Password" required>
                                <div class="errtxt" style="color:red" ng-show="myForm.errsubmitted1">
                                  <span ng-show="myForm.password.$error.required">请填写密码!</span>
                                </div>
                            </div>
                            <div class="fieldset">
                                <input type="checkbox" id="remember-me" checked>
                                    <label for="remember-me">记住登录状态</label>
                            </div>
                            <div class="fieldset">
                                <input class="full-width2" type="submit" value="登录"><a href="#"></a>
                            </div>
                        </form>
                    </div>

js如下:jQuery(document).ready(function($) {
    var $form_modal = $('.cd-user-modal'),
            $form_login = $form_modal.find('#cd-login'),
            $form_signup = $form_modal.find('#cd-signup'),
            $form_modal_tab = $('.cd-switcher'),
            $tab_login = $form_modal_tab.children('li').eq(0).children('a'),
            $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
            $main_nav = $('.main_nav');


    //弹出窗口
    $main_nav.on('click', function(event) {


        if ($(event.target).is($main_nav)) {
            // on mobile open the submenu
            $(this).children('ul').toggleClass('is-visible');
        } else {
            // on mobile close submenu
            $main_nav.children('ul').removeClass('is-visible');
            //show modal layer
            $form_modal.addClass('is-visible');
            //show the selected form
            ($(event.target).is('.cd-signup')) ? signup_selected() : login_selected();
        }
        $('.cd-close-form').show();
    });

加载中
返回顶部
顶部