草芽学习网提供织梦建站和织梦仿站培训,从零基础讲解DEDECMS程序建站和DEDE仿站方法!

DEDECMS网站如何制作弹窗登录框

作者:草芽学习网 来源:织梦百科
DEDECMS网站的登录页面是独立的页面,用户登录时需要通过链接进入DEDECMS登录页面进行登录。下面介绍一下DEDECMS网站如何制作弹窗登录框的方法。 方法/步骤 第一步:将DEDECMS登录页面的

DEDECMS网站的登录页面是独立的页面,用户登录时需要通过链接进入DEDECMS登录页面进行登录。下面介绍一下DEDECMS网站如何制作弹窗登录框的方法。

DEDECMS弹窗登录框

方法/步骤

第一步:将DEDECMS登录页面的代码放到文章页面模板代码最下方;

<p class="login bor usrdenlu">

      <h6>VIP学员登录</h6>

  <p class="main">

    

    <form name='form1' method='POST' action='/member/index_do.php'>

      <input type="hidden" name="fmdo" value="login">

      <input type="hidden" name="dopost" value="login">

      <input type="hidden" name="gourl" value="<?php if(!empty($gourl)) echo $gourl;?>">

      <ul>

        <li> <span>会员名:</span>

          <input id="txtUsername" class="text login_from" type="text" name="userid"/>

          <a target="_blank" href="/bm.html">立即报名</a>

        </li>

        <li> <span>密&nbsp;&nbsp;&nbsp;码:</span>

          <input id="txtPassword" class="text login_from2" type="password" name="pwd"/>

        </li>

        <li> <span>验证码:</span>

          <input id="vdcode" class="text login_from3" type="text" style="width: 50px; text-transform: uppercase;" name="vdcode"/>

          <img id="vdimgck" align="absmiddle" onclick="this.src=this.src+'?'" style="cursor: pointer;" alt="看不清?点击更换" src="/include/vdimgck.php"/>

         </li>

        <li style="display:none;"> <span>有效期:</span>

          <input type="radio" checked="checked" value="2592000" name="keeptime" id="ra1"/>

          <label for="ra1">一个月</label>

          <input type="radio" value="604800" name="keeptime" id="ra2"/>

          <label for="ra2">一周</label>

          <input type="radio" value="86400" name="keeptime"  id="ra3"/>

          <label for="ra3">一天</label>

          <input type="radio" value="0" name="keeptime"  id="ra4"/>

          <label for="ra4">即时</label></li>

        <li>

          <input type="hidden" value="<?php echo $url_this;?>" name="nowurl" />

          <button id="btnSignCheck" class="button2" type="submit" style="width:100px;color:green;">登&nbsp;录</button> </li>

      </ul>

    </form>

  </p>

<span><a href="javascript:;" class="flbc" onclick="hideWindow('login', 0, 1);" title="关闭">关闭</a></span>

</p>

第二步:添加一些CSS样式代码,让DEDECMS登录框默认为隐藏;

.usrdenlu{display:none;width:400px;height:280px;padding:20px 50px;font-size:16px;position:fixed;z-index:999;top:50%;left:50%;margin-top:-200px;margin-left:-300px;background:#fff;border:7px solid #9999994f;border-radius:6px;color:#333;}

  .usrdenlu li{padding:10px 0;}

  .usrdenlu h6{padding:10px 0;border-bottom:2px solid green;font-size:16px;margin:0;margin-bottom:20px;}

  .flbc {   

    width: 20px;

    height: 20px;

    overflow: hidden;

    text-indent: -9999px;

    background: url(https://www.xuewangzhan.net/vip/static/image/common/cls.gif) no-repeat 0 0;

    cursor: pointer;

    position:absolute;

    top:10px;

    right:10px;

}

   .usrdenlu input{

     height: 30px !important;

    line-height: 30px !important;

    font-size: 16px !important;

  }

第三步:放入JQUERY代码,实现点击按钮时,弹出DEDECMS登录框;

<script>

$(".xydenlu").click(

function(){

$(".usrdenlu").show();

});

  $(".flbc").click(

function(){

$(".usrdenlu").hide();

});

</script>

这样就制作好了DEDECMS网站弹窗登录框了。

本文地址:https://www.caoyaedu.com/dedebk/116.html