普通layer弹框样式

最新推荐文章于 2022-09-07 11:41:53 发布

bluelotos893

最新推荐文章于 2022-09-07 11:41:53 发布

阅读量181

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/bluelotos893/article/details/89954411

版权

CSS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

记录一下自己平时经常用到的弹出层表单，方便以后复制使用。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
    <style>
        #commitFormLayerWin div.layer-wrap {
            background: #fff;
            font-size: 16px;
        }

        #commitFormLayerWin div.form-content {
            padding: 20px 20px 0 20px;
            margin-bottom: 16px;
        }

        #commitFormLayerWin div.form-info-item-item {
            display: flex;
            margin-bottom: 14px;
        }

        #commitFormLayerWin .form-title {
            min-width: 52px;
            line-height: 32px;
            font-weight: 600;
        }

        #commitFormLayerWin .form-info-item {
            flex: 1;
        }

        #commitFormLayerWin div.commit-form-wrap {
            border-top: 1px solid #e7e7e7;
            text-align: center;
            padding: 8px 0;
        }     

        #commitFormLayerWin div.commit-form-wrap span {
            display: inline-block;
            width: 50%;
            line-height: 38px;
            cursor: pointer;
            color:#999;
        }
		#commitFormLayerWin div.commit-form-wrap span.commit-form-btn {
            color: #0076FB;
            border-right: 1px solid #e7e7e7;
        }
        #commitFormLayerWin .form-control {
            font-size: 16px;
            padding:6px 8px;
        }

        #commitFormLayerWin textarea {
            min-height: 80px;
            resize: none;
        }
    </style>
    <title>测试..</title>
</head>

<body>
    <div class="layer-wrap">
        <div class="form-content">
            <div class="form-info-item-item">
                <span class="form-title">姓名：</span>
                <span class="form-info-item"><input type="text" name="" class="form-control"></span>
            </div>
            <div class="form-info-item-item">
                <span class="form-title">电话：</span>
                <span class="form-info-item"><input type="text" name="" class="form-control"></span>
            </div>
            <div class="form-info-item-item">
                <span class="form-title">备注：</span>
                <span class="form-info-item"><textarea name="" class="form-control"
                        placeholder="内容请不要超过30个字"></textarea></span>
            </div>
        </div>
        <div class="commit-form-wrap">
            <span class="commit-form-btn">确定</span>
            <span class="cancel-form-btn">取消</span>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
    <script>
        function openContact(){
			var layerIndex = layer.open({
				title:['表头', 'font-size:18px;text-align:center;background:#5FAEF0;color:#fff;padding:0 10px;'],
				type:1,
				area: ['82%', 'auto'],
				closeBtn: 0,
				id:"commitFormLayerWin",
				scrollbar: false,
				content: '<div class="layer-wrap"><div class="form-content"><div class="lxfzr-form-item"><span class="lxfzr-title">姓名：</span><span class="lxfzr-form"><input type="text"name=""class="form-control"></span></div><div class="lxfzr-form-item"><span class="lxfzr-title">电话：</span><span class="lxfzr-form"><input type="text"name=""class="form-control"></span></div><div class="lxfzr-form-item"><span class="lxfzr-title">备注：</span><span class="lxfzr-form"><textarea name=""class="form-control"placeholder="内容请不要超过30个字"></textarea></span></div></div><div class="commit-form-wrap"><span class="commit-form-btn">确定</span><span class="cancel-form-btn">取消</span></div></div>',
				success: function(layero, index){
				    console.log('open win');
				},
				end: function(layero, index){
				    console.log('关闭了');
				}, 
			});
            var $form = $("#commitFormLayerWin");
            $form.find(".commit-form-btn").on("click",function(){
                
                layer.close(layerIndex)
            })
            $form.find(".cancel-form-btn").on("click",function(){
                layer.close(layerIndex)
            })

		}
    </script>
</body>

</html>

bluelotos893

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
普通layer弹框样式

记录一下自己平时经常用到的弹出层表单，方便以后复制使用。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scala...
复制链接

扫一扫

专栏目录