易优仿官方登录弹窗效果分享

小秋同学 02-09 11:44:31 网站教程
摘要: 大家好,这里来分享下,会员登录弹窗效果直接登录的技巧分享,这里只是小秋模仿官方的演示站做的效果,大家如果有兴趣的话可以借鉴使用。摘要: 大家好,这里来分享下,会员登录弹窗效果直接登录的技巧分享,这里只是小秋模仿官方的演示站做的效果,大家如果有兴趣的话可以借鉴使用。

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



易优仿官方登录弹窗效果分享(图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:


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


喜欢的可以下载吧:



本帖含有附件!帮助5.00学币可下载!!

文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/1269.html发布于 02-09 11:44:31
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就施舍一下文章作者

支付宝施舍

微施舍

阅读
分享
加入收藏

发表评论
加载中~