点击弹出拟态框

Html

Css

   * {
	margin:0;
	padding:0;
}
html,body {
	height:100%;
}
li {
	list-style:none;
}
body {
	background:#f5f5f5;
	cursor:pointer;
}
.clearfix {
	clear:both;
	content:'';
	display:block;
	overflow:hidden;
}
.modal {
	position:absolute;
	width:16em;
	height:10em;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	background:#fff;
	z-index:100;
	padding:.3rem .5rem;
	border-radius:5px;
	color:#555;
}
.hide {
	display:none;
}
.modal.lg {
	width:80%;
	margin-left:-40%;
}
.sel_cont {
	border:1px solid #e2dcdc;
	height:65%;
	border-radius:2px;
	margin:.3rem 0;
}
.sel_aside {
	width:25%;
	border-right:1px solid #e2dcdc;
	overflow:auto;
}
.modal h5 {
	font-size:20px;
}
.mod_close,.close {
	color:#666;
	top:.3rem;
	right:.3rem;
	position:absolute;
	font-size:22px;
	cursor:pointer;
	font-style:normal;
}
.job_btn .close {
	font-size:13px;
	right:3px;
	top:50%;
	margin-top:-9px;
}
.sel_res p {
	color:#1E9FFF;
	font-size:16px;
	font-weight:bold;
}
.mod_close::before,.close::before {
	content:"\2716";
}
.modal_back {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.5);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#7f000000,endColorstr=#7f000000)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
}
.side-nav {
	font-size:13px;
}
.side-nav a {
	color:#333;
	padding:.25rem;
	display:block;
}
.sub-menu {
	max-height:0;
	opacity:0;
	overflow:hidden;
	transition:all .1s linear;
	padding-left:.3rem;
}
.sub-menu.open {
	max-height:20rem;
	opacity:1;
	color:#fff;
}
.side-nav li {
	position:relative;
}
.side-nav li a.active {
	background:#5591ecb8;
	color:#fff;
}
.side-nav .menu_tit {
	width:90%;
	display:inline-block;
}
.arrow {
	width:7px;
	height:7px;
	transform:rotate(45deg);
	display:inline-block;
}
.arrow_rt {
	border-top:2px solid #ccc;
	border-right:2px solid #ccc;
}
.arrow_bt {
	border-bottom:2px solid #ccc;
	border-right:2px solid #ccc;
}
a {
	text-decoration:none;
}
.sel_cont:after {
	content:'';
	display:block;
	overflow:hidden;
	clear:both;
}
.sel_cont>div {
	height:100%;
	float:left;
	box-sizing:border-box;
}
.sel_job {
	width:75%;
	padding:.3rem .1rem;
}
.job_btn {
	border:1px solid #ccc;
	text-align:center;
	margin:.1rem .15rem;
	padding:.1rem .3rem;
	display:inline-block;
	font-size:15px;
	border-radius:3px;
	cursor:pointer;
	position:relative;
}
.sel_all {
	float:left;
	height:80px;
	overflow:auto;
	height:76.5px;
}
.sel_all .job_btn {
	margin:0 .15rem;
	padding:.1rem .5rem .1rem .3rem;
	display:block;
	float:left;
}
.sel_all .job_btn .close {
	display:inline-block;
	right:8px;
}
.job_btn.active {
	border-color:#1E9FFF;
}
.sel_res {
	float:left;
	width:85%;
	padding:0 10px;
	box-sizing:border-box;
}
.sel_res>p {
	float:left;
	padding:.1rem;
}
.sel_btn {
	float:right;
	width:15%;
}
.sel_btn>button {
	display:block;
}
.btn_pur {
	background:#6C66DD;
	color:#fff;
	padding:.15rem .5rem;
	border:0 none;
	outline:0 none;
	cursor:pointer;
}
.sel_hid {
	height:auto;
}
@media (max-width:768px) {
	.tool_modal {
	width:95%;
	height:60%;
	box-sizing:border-box;
}
.side-nav .menu_tit {
	width:85%;
}
.sel_all .job_btn {
	padding-right:1.1rem;
}
}

(function(doc, win) {
    var docEl = win.document.documentElement;
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var refreshRem = function() {
        var clientWidth = win.innerWidth ||
            doc.documentElement.clientWidth ||
            doc.body.clientWidth;
        // console.log(clientWidth); 页面宽度
        if (!clientWidth) return;
        var fz;
        var width = clientWidth;
        var px;
        px = 16;
        fz = px * width / 375;
        docEl.style.fontSize = fz + 'px';
        //   console.log(docEl.style.fontSize);
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, refreshRem, false);
    doc.addEventListener('DOMContentLoaded', refreshRem, false);
    refreshRem();
})(document, window);

var aside = [{
        menu: '战略管理',
        childList: [{
                menu: '战略1',
                childList: [{
                    menu: '战略1-1',
                    childList: [{
                        menu: '战略1-1-1',
                        childList: [{
                            menu: '战略1-1-1-1',
                            childList: []
                        }]
                    }]
                }]
            },
            {
                menu: '战略2',
                childList: [{
                        menu: '战略2-1',
                        childList: []
                    },
                    {
                        menu: '战略2-2',
                        childList: []
                    }
                ]
            },
            {
                menu: '战略3',
                childList: []
            }
        ]
    },
    {
        menu: '通用管理',
        childList: [{
                menu: '通用1',
                childList: []
            },
            {
                menu: '通用2',
                childList: []
            },
            {
                menu: '通用3',
                childList: []
            }
        ]
    },
    {
        menu: '人力资源管理',
        childList: [{
                menu: '招聘',
                childList: []
            },
            {
                menu: '培训',
                childList: []
            },
            {
                menu: '绩效管理',
                childList: []
            },
            {
                menu: '薪酬与激励',
                childList: []
            },
            {
                menu: '能力与素质',
                childList: []
            }
        ]
    }
]

var modalPlugin = function() {

var loadDetail = function(data) { //加载详情
        var str = '';
        var len = parseInt(Math.random() * 6) + 1;
        for (var i = 0; i < len; i++) {
            str += '<span class="job_btn">' + data + i + '<i class="close hide"></i></span>';
        }
        return str;
    }

var createModal = function(obj) {
        var div; //遮罩层
        var back = $('.modal_back'), //遮罩层固定样式
            cls = obj.cls || 'tool_modal', //加载的拟态框样式
            modal = $('.' + cls), //拟态框
            html = obj.html || '';

//背景虚化
        back.length == 0 ? (div = $('<div class="modal_back"></div>'),
                $('body').append(div), $(modal[0]).removeClass('hide')) :
            $(back[0]).removeClass('hide');

//创建拟态框
        if (modal.length == 0) {
            modal = obj.html || '<div class="modal ' + cls + '">' +
                '<div><h5>使用工具选择</h5><div class="close mod_close"></div></div>' +
                '<div class="sel_cont">' +
                '<div class="sel_aside">' +
                '<div class="side-nav"></div></div>' +
                '<div class="sel_job"><h5></5>' +
                '<div class="fin_choose"></div></div></div>' +
                '<div class="extra_in clearfix">' +
                '<div class="sel_res"><p>已选:</p>' +
                '<div class="sel_val hide"></div>' +
                '<div class="sel_all"><div class="sel_hid"></div></div></div>' +
                '<div class="btn sel_btn">' +
                '<button class="btn btn_pur">确认</button>' +
                '</div></div>';
            $('body').append(div, modal);
        } else {
            $(modal[0]).removeClass('hide');
        }
        //加载内容
        if (obj.load) //有则异步请求数据
            setTimeout(modalPlugin.test(obj), 2000);
    }

var test = function(obj) {
        return function() {
            modalPlugin.loadMenu(obj.data);
        }
    }

return {
        test: test,
        loadDetail: loadDetail,
        loadMenu: loadMenu,
        createModal: createModal
    }
}();

//测试
function start() {
    modalPlugin.createModal({
        load: !0,
        cls: 'tool_modal',
        data: aside
    });
}

//关闭拟态框
$(document).on('click', '.mod_close', function() {
    $(this).parents('.modal').addClass('hide');
    $('.modal_back').addClass('hide');
});

//菜单点击
$(document).on('click', '.side-nav li', function(e) {
    var child = $(this).find('.sub-menu');
    if (child.length > 0) {
        $(this).find('.arrow').eq(0).toggleClass('arrow_rt arrow_bt');
        child.eq(0).toggleClass('open');
    } else {
        var txt = $(this).find('.menu_tit').html();
        var span = modalPlugin.loadDetail([txt]);
        $('.fin_choose').html(span);
        $('.sel_val').attr('data-status', '1');
    }
    e.stopPropagation();
});

//填充选中
$(document).on('click', '.fin_choose .job_btn', function() {
    $(this).toggleClass('active');
    var btn = $(this).parent().children('.active').clone(); //选中个数
    $('.sel_hid').html(btn);
});

//删除选中
$(document).on('click', '.job_btn .close', function() {
    var pre = $(this).parents('.job_btn')[0];
    var cho = $('.fin_choose span');
    for (var i = 0; i < cho.length; i++) {
        // console.log(cho[i].isEqualNode(pre));
        if (cho[i].isEqualNode(pre)) {
            $(cho[i]).removeClass('active');
        }
        pre.remove();
    }
});

//关闭拟态框
$(document).on('click', '.modal_back', function(e) {
    $('.modal').addClass('hide');
    $(this).addClass('hide');
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

点击弹出拟态框



代码描述：拟态框弹出

点击按钮弹出拟态框
延迟2s模拟加载数据生成菜单
菜单没有子节点时模拟点击加载数据填充到右侧
右侧和已选互相关联，状态同步
点击×或者拟态框外则关闭
目前暂时还没有想到还要新加哪些功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

.

相关代码

点击弹出拟态框

最新