dedecms（织梦系统）登录框如何设置成弹窗登录

温馨提示：手机扫码可阅读当前文章!
文章简介：DEDECMS是一个非常流行的内容管理系统。为了提高用户体验，很多网站都希望把登录框做成一个弹出窗口。下面将详细介绍如何从DEDECMS网站上的登录框中创建一个弹出登录效果。DEDECMS is a very popular Content...

DEDECMS是一个非常流行的内容管理系统。为了提高用户体验，很多网站都希望把登录框做成一个弹出窗口。下面将详细介绍如何从DEDECMS网站上的登录框中创建一个弹出登录效果。DEDECMS is a very popular Content management system. In order to improve the user experience, many websites hope to make the login box into a pop-up window. Below will be a detailed introduction to how to create a pop-up login effect from the login box on the DEDECMS website.

第一步：将DEDECMS登录页面的代码放到文章页面模板的底部

首先，我们需要将DEDECMS登录页面的代码放到文章页面模板的特定位置。将以下代码粘贴到文章页面模板的底部。

<p class="login bor usrdenlu">
    <h6>会员登录</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="/login.html">立即登录</a>
                </li>
                <li>
                    <span>密&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>

在这段代码中，我们将DEDECMS登录页的HTML代码包装在一个“<p>”元素中，并向其中添加一个自定义类“usrdenlu”，用于后续的样式设置和操作。

第二步：添加样式

接下来，我们需要添加一些CSS样式代码来显示和隐藏登录弹出窗口和样式设置。将以下CSS代码添加到网站的样式表中。

.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.com/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;
}

这段CSS代码定义了弹出登录框的样式usrdenlu'类设置登录框的大小、位置和背景样式，这个‘’flbc类设置关闭按钮的样式，并且这个‘’类定义了输入框的样式。

第三步：新增按一下事件

最后，我们需要使用jQuery添加点击事件，点击按钮时弹出一个登录框，点击关闭按钮时隐藏登录框。将以下代码添加到网站的脚本文件中，或将其包装在页面上的"<script>"标签中。

$(".xydenlu").click(function(){
    $(".usrdenlu").show();
});
$(".flbc").click(function(){
    $(".usrdenlu").hide();
});

在这段代码中，我们使用了‘$（“. 西登吕”)' 以选择点击按钮（您可以从您的网站使用相应的选择器），并使用'。按一下（）'函数来为按钮添加一个单击事件。当按钮被点击时，我们使用'$（".usrdenlu"）。显示'来显示登录框。类似的，我们使用了'$（“. flbc”）”来选择关闭按钮，并在其中添加一个单击事件。当关闭按钮被点击时，我们使用了'$（“. 乌斯尔登卢”). 赫德来隐藏登录框。

经过以上步骤，我们已经成功地使DECMS网站上的登录框看起来像一个弹出的登录。当用户点击相应的按钮时，将在弹出的窗口中显示登录框。输入登录信息后，用户可以点击登录按钮，完成登录操作。关闭按钮可以隐藏登录框。

注：以上代码可能需要根据您的实际情况进行修改和适应。确保DEDECMS登录页面代码正确，相关JavaScript库和样式表介绍正确，并根据网站实际情况调整样式和脚本选择器。