layer弹框内部自定义按钮关闭弹框（实现简单的登录条款）

layer弹框内部自定义按钮关闭弹框（实现简单的登录条款）

你好！ 这是你第人生的转折点，你已经将layer弹框收入囊下

这个链接是layer弹框开发使用文档

链接: https://layer.layui.com/
或者你打开Layui开发使用文档在里面找弹出层是一样的

页面功能展示：

1.点击登录条款弹出弹出层

 /*
    点击专业医学用户登录条款
    */
    $("#clause").on("click",function () {
        //单个使用
        layer.open({
            skin: 'demo-class',//弹框样式
            title: false,//不显示标题
            btn: false,//不显示弹框按钮
            closeBtn: 0, //不显示关闭按钮
            resize: false,//不允许拉伸
            area:["90%","90%"],//宽高比例
            content: $('#detail').html(),//内容
        });

    })

当然还有很多layer自带的属性文档里面很多默认的我就不在这里一一展示了

2.弹出层页面内容编写

 <!--HTML部分-->
    <script type="text/html" id="detail">
        <div role="edit" tabindex="-1">
            <div>
                <h3> <b><label style="color: yellow">*请仔细阅读下面的协议，只有接受协议方可继续进行登录。</label></b></h3>
                <hr style="height:1px;border:none;border-top:3px solid red;" />
                <span style="font-size: 16px;">
                <p>1．服务条款的确认******************************************************************达成协议并接受所有的服务条款。<label style="color: yellow">本人理解本次务中所含有的信息是提******************************************************。</label></p>
                <p>2．***************************************************************************************************************************************************</p>
            	</span>
            </div>
            <div style="text-align: center">
                <button type="button" onclick="clickme();" class="layui-btn" style="background: #433B72;border-color: #1E9FFF;margin-top: 30px;width: 60%;border-radius: 8px">确定</button>
            </div>
        </div>
    </script>

这里是用id获取html的方法当然还有很多方法根据需求实现即可

弹出层内容功能显示：

弹出层的宽高比例可以根据条款内容的多少来更改

3.需要用户浏览全部的条款内容才可以退出最简单的方法在内容的最下面加一个按钮就可以了

弹出层内部按钮页面显示：

  function clickme(){
        layer.closeAll(); //疯狂模式，关闭所有层
    }

4.根据需求样式的修改参照即可

 body .demo-class {
            background-color: #4d5d9b;
            color: white;
        }

#完工撒花