弹出式登录窗口怎么实现有示例代码吗这种效果
迅睿框架 更新 2019-12-13 12:07:05
薄荷绿
薄荷绿
弹出式登录窗口怎么实现？有示例代码吗？这种效果
<form id="myform"> {dr_form_hidden()} <div class="form-group"> <div class="input-icon"> <i class="fa fa-user"></i> <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="账号/邮箱/手机" name="data[username]"> </div> </div> <div class="form-group"> <div class="input-icon"> <i class="fa fa-lock"></i> <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="登录密码" name="data[password]"> </div> </div> <div class="form-group"> <div class="input-group login-code"> <div class="input-icon"> <i class="fa fa-code"></i> <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="验证码" name="code"> </div> <div class="input-group-btn fc-code"> {dr_code(120, 35)} </div> </div> </div> <div class="form-actions"> <label class="rememberme mt-checkbox mt-checkbox-outline"> <input type="checkbox" name="remember" value="1"> 记住登录 <span></span> </label> <button type="button" onclick="dr_ajax_member('{dr_member_url('login/index')}', 'myform');" class="btn green pull-right"> 登录 </button> </div> </form>这个登录代码放到任意页面都可以用{table table=member_setting name=register} {php $register = json_decode($t.value,true);} {/table} <form id="myform_reg"> {dr_form_hidden()} <div class="form-body" style="padding-bottom:0"> {if in_array('username', $register.field)} <div class="form-group" id="dr_row_username"> <label class="col-md-2 control-label">账号</label> <div class="col-md-9"> <label><input type="text" class="form-control input-large" name="data[username]" id="dr_username"></label> </div> </div> {/if} {if in_array('email', $register.field)} <div class="form-group " id="dr_row_email"> <label class="col-md-2 control-label">邮箱</label> <div class="col-md-9"> <label><input type="text" class="form-control input-large" name="data[email]" id="dr_email"></label> </div> </div> {/if} {if in_array('phone', $register.field)} <div class="form-group " id="dr_row_phone"> <label class="col-md-2 control-label">手机号</label> <div class="col-md-9"> <label><input type="text" class="form-control input-large" name="data[phone]" id="dr_phone"></label> </div> </div> {/if} <div class="form-group " id="dr_row_password"> <label class="col-md-2 control-label">密码</label> <div class="col-md-9"> <label><input type="password" class="form-control input-large" name="data[password]" id="dr_password"></label> </div> </div> <div class="form-group " id="dr_row_password2"> <label class="col-md-2 control-label">确认密码</label> <div class="col-md-9"> <label><input type="password" class="form-control input-large" name="data[password2]" id="dr_password2"></label> </div> </div> {$myfield} {if $register.sms} <div class="form-group" id="dr_row_sms"> <label class="col-md-2 control-label">短信验证</label> <div class="col-md-10"> <div class="input-group input-large"> <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="dr_sms" name="sms"> <div class="input-group-btn"> <button class="btn blue" onclick="dr_ajax_url('/index.php?s=member&c=api&m=register_code&id='+$('#dr_phone').val()+'&code='+$('#dr_code').val())" type="button">获取手机验证码</button> </div> </div> </div> </div> {/if} {if $register.sms || $register.code} <div class="form-group" id="dr_row_code"> <label class="col-md-2 control-label">验证码</label> <div class="col-md-9"> <div class="input-group input-large"> <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="dr_code" name="code"> <div class="input-group-btn fc-code"> {dr_code(120, 35)} </div> </div> </div> </div> {/if} <div class="form-actions" style="margin-top:30px"> <label class="col-md-2 control-label"></label> <div class="col-md-9" style="padding-left:5px;"> <label><button type="button" class="btn red" onclick="dr_ajax_member('{dr_member_url('register/index')}', 'myform_reg');"> 立即注册</button></label> <label class="mt-checkbox mt-checkbox-outline" style="margin-left:20px;"> <input type="checkbox" name="is_protocol" value="1" checked> 我已阅读并同意 <span></span> </label> <label> <a href="javascript:dr_show_protocol();">《用户注册协议》</a> </label> </div> </div> </div> </form><div class="col-md-11 col-lg-10"> <h2>创建一个账号</h2> <p class="lead">个人账号或者企业账号</p> <div class="row"> <div class="col-12"> {loop $register.group $i} <div class="col-lg-6 col-md-6 col-md-offset-6 col-6"> <a class="btn block btn--icon bg--twitter type--uppercase {if $groupid == $i}active{/if}" href="{dr_member_url('register/index', ['groupid' => $i])}"> <span class="btn__text"> <i class="socicon-twitter"></i> {$group[$i][name]} </span> </a> </div> {/loop} </div> </div> <hr data-title="OR"> <form id="myform_reg"> {dr_form_hidden()} <div class="row form-body" style="padding-bottom:0"> {if in_array('username', $register.field)} <div class="col-12" id="dr_row_username"> <input type="text" class="form-control input-large" name="data[username]" id="dr_username" placeholder="用户名" > </div> {/if} {if in_array('email', $register.field)} <div class="col-12" id="dr_row_email"> <input type="text" class="form-control input-large" name="data[email]" id="dr_email" placeholder="邮箱" > </div> {/if} {if in_array('phone', $register.field)} <div class="col-12 " id="dr_row_phone"> <input type="text" class="form-control input-large" name="data[phone]" id="dr_phone" placeholder="手机号" > </div> {/if} <div class="col-12 " id="dr_row_password"> <input type="password" class="form-control input-large" name="data[password]" id="dr_password" placeholder="密码" > </div> <div class="col-12" id="dr_row_password2"> <input type="password" class="form-control input-large" name="data[password2]" id="dr_password2" placeholder="确认密码" > </div> {$myfield} {if $register.sms} <div class="col-12" id="dr_row_sms"> <div class="col-6"> <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="dr_sms" name="sms" placeholder="短信验证" > </div> <div class="col-6"> <button class="btn blue" onclick="dr_ajax_url('/index.php?s=member&c=api&m=register_code&id='+$('#dr_phone').val()+'&code='+$('#dr_code').val())" type="button">获取手机验证码</button> </div> </div> {/if} {if $register.sms || $register.code} <div class="col-12" id="dr_row_code"> <div class="col-6"> <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="dr_code" name="code" placeholder="验证码"> </div> <div class="col-6"> {dr_code(120, 35)} </div> </div> {/if} <div class="col-12"> <button type="button" class="btn btn--primary" onclick="dr_ajax_member('{dr_member_url('register/index')}', 'myform_reg');" style="width: 100%">立即注册</button> </div> <div class="col-12"> <div class="input-checkbox"> <input type="checkbox" name="is_protocol" value="1" checked id="input-assigned-0"> <label for="input-assigned-0"></label> </div> <span>我已阅读并同意<a href="javascript:dr_show_protocol();"><span>《用户注册协议》</span> </a></span> </div> </div> </form> </div>