大家好，这里来分享下，会员登录弹窗效果直接登录的技巧分享，易优很难在前段能够直接登录页面要进会员中心登录才可以实现，现在只要这个方法就可以了。这里只是小秋模仿官方的演示站做的效果，大家如果有兴趣的话可以借鉴使用。



易优仿官方登录弹窗效果分享(图1)




以下便是简单的步骤方法：


前段模板代码：


<div id="log">

    <div class="dialog">

        <div class="dialog-head">

            <span class="dialog-close close rotate-hover"></span>

        </div>

        <div class="dialog-body">

            <div class="register">

                <div class="blank-middle"></div>

                <div class="tab text-center">

                  <ul>

                    <li id="signtab1" onclick="setTab('signtab',1,2)" class="cur">登录</li>

                    <!-- <li id="signtab2" onclick="setTab('signtab',2,2)">注册</li> -->

                  </ul>

                </div>

                <!-- 登录开始 -->

                <div id="con_signtab_1">

                    <form method="post" id="popup_login_submit">

                        <!-- 用户名 -->

                        <div class="form-group">

                            <div class="field field-icon">

                                <input type='text' name='username' id='username' class="input text-main radius-none" value="" data-validate="required:必填" placeholder="用户名">

                                <span class="icon fa fa-user text-gray"></span>

                            </div>

                        </div>

                        <!-- 密码 -->

                        <div class="form-group">

                            <div class="field field-icon">

                                <input type='password'  name='password' id="password" class="input text-main radius-none" placeholder="密码" value=""/>

                                <span class="icon fa fa-key text-gray"></span>

                            </div>

                        </div>

                        <!-- 验证码包括手机验证码专用样式input-group-->

                        <div class="form-group" id="ey_login_vertify">

                            <div class="field field-icon">

                                <div class="input-group">

                                    <input type='text'  name='vertify' autocomplete="off" class="input text-main radius-none" placeholder="图形验证码" value=""/>

                                    <span class="addon"><img src="{eyou:url link='api/Ajax/vertify' vars='type=users_login' /}" class="chicuele" id="imgVerifyss" onclick="ey_fleshVerifys();" title="看不清？点击更换验证码" align="absmiddle">

                                    <span class="icon fa fa-key text-gray"></span></span>

                                </div>

                            </div>

                        </div>

                        <!-- 提交 -->

                        <div class="form-button">

                            <input type="hidden" name="referurl" value=""/>

                            <input type="hidden" name="website" value="website"/>

                            <input type="button" name="submit" onclick="popup_login_submit();" class="button bg-yellow button-large button-block border-none radius-none text-white" value="提交"/>

                        </div>

                    </form>

                    <p class="margin-top text-right">

                        <a href="{:url('user/Users/reg')}">注册账号</a>&nbsp;|&nbsp;

                        <a href="{:url('user/Users/retrieve_password')}">忘记密码</a>

                    </p>

                </div>

                <!-- 登录end -->


                <!-- 注册开始 -->

                <div id="con_signtab_2" style="display:none;">

                    <form method="post">

                        <!-- 用户名 -->

                        <div class="form-group">

                            <div class="field field-icon">

                                <input type='text' name='username' class="input text-main radius-none" value="" data-validate="required:必填" placeholder="手机/邮箱/账号">

                                <span class="icon fa fa-user text-gray"></span>

                            </div>

                        </div>


                        <!-- 密码 -->

                        <div class="form-group">

                            <div class="field field-icon">

                                <input type='password' name='password' class="input text-main radius-none" value="" data-validate="required:必填" placeholder="密码" />

                                <span class="icon fa fa-key text-gray"></span>

                            </div>

                        </div>


                        <!-- 手机 -->

                        <div class="form-group">

                            <div class="field field-icon">

                                <input type='text' name='username' class="input text-main radius-none" value="" data-validate="required:必填" placeholder="请输入手机号">

                                <span class="icon fa fa-phone text-gray"></span>

                            </div>

                        </div>


                        <!-- 验证码包括手机验证码专用样式input-group-->

                        <div class="form-group">

                            <div class="field field-icon">

                                <div class="input-group">

                                    <input type='text' name='phone' class="input text-main radius-none" placeholder="请输入短信验证码" value=""/>

                                    <span class="addon" style=""><img src="{eyou:url link='api/Ajax/vertify' vars='type=users_login' /}" class="chicuele" id="imgVerifys" onclick="ey_fleshVerify();" title="看不清？点击更换验证码" align="absmiddle"></span>

                                    <span class="icon fa fa-phone text-gray"></span>

                                </div>

                            </div>

                        </div>

                        <!-- 提交 -->

                        <div class="form-button">

                            <input type="submit" class="button bg-yellow button-large button-block border-none radius-none text-white" value="提交"/>

                        </div>

                    </form>

                </div>

                <!-- 注册end -->


                <!-- 第三方账号登录 -->

                <div id="ey_third_party_login">

                    <div class="blank-middle"></div>

                    <div class="line"><span class="text-gray bg-white text-default">社交账号登录</span><hr></div>

                    <div class="blank-small"></div>

                    <div class="bnt-login"> 

                        <a title="QQ登录" href="{eyou:url link='plugins/QqLogin/login' SEO_pseudo='1' seo_inlet='0' /}" class="qq"><i class="fa fa-qq"></i></a> 

                        

                       <!-- <a title="微信登录" href="{eyou:url link='plugins/WxLogin/login' seo_pseudo='1' seo_inlet='0' /}" class="weixin"><i class="fa fa-weixin"></i></a>   

                        

                        <a title="微博登录" href="{eyou:url link='plugins/Wblogin/login' seo_pseudo='1' seo_inlet='0' /}" class="weibo"><i class="fa fa-weibo"></i></a>  -->

                    </div>

                </div>

                <!-- 第三方账号登录 -->

            </div>

        </div>

    </div>

</div>


以上是弹出窗口的代码。



{eyou:user type='open'}  

   {eyou:user type='userinfo'}

    <div id="{$field.htmlid}">

   <div class="nav-login">  

  <a href="javascript:;" {$field.loginPopupId} data-target="#log" data-width="22%" data-toggle="click" data-mask="1" class="nav-userlogin dialogs">

   <img id="{$field.head_pic}" src="{$users.head_pic|get_head_pic=###}" alt="登录" class="nav-login-img"><span style="color:#b9854c;">登录</span></a>

 </div>   

  </div> 

              {$field.hidden}

                        {/eyou:user}

  {/eyou:user}



以上是显示按钮的会员登录代码。


剩下的就是应用文件和样式：


PS：


样式则自己调试，如果跟自己模板有冲出的请自己微调


喜欢的可以下载吧：