layer弹出窗，鼠标停靠悬浮补全，是否功能，

引入jar包

1.引入layer包

2.没有确定按钮

 layer.confirm(names, {
        title: "提示",
        btn: ['返回'],
        closeBtn: 0,
        offset: '200px',
        icon: 2
    }, function (index) {
        finish();
        layer.close(index);
    });

3.弹出有确定按钮

 layer.confirm('请确认后提交', {
        btn: ['确定']['取消'] //可以无限个按钮
    }, function(index, layero){
        //按钮【按钮一】的回调
        saveFinianclReviewResult();
        layer.close(index);
    }, function(index){
        layer.close(index);
        //按钮【按钮二】的回调
    });

4.弹出可填写内容

layer.prompt({
            formType: 0,
            value: '',
            title: '其他职业说明',
            btn: ['确定'], //按钮，
            btnAlign: 'c'
        }, function(value,index){
           paramsObj.otherCase = value;
            layer.close(index);
        });

5.提示

layer.open({
title: ‘提示’
, content: “验证码发送失败！[” + res.msg + “]”
});

鼠标停靠悬浮补全

1.页面增加div

<div id="scope" style="margin-top: 31%;margin-left: 18%;"></div>

2.js中增加悬浮触发功能

$("#scope").mouseover(function() {
    var selected = ($("#scope").val().split('-'))[0];
    tipIndex = layer.tips(paramsObj.scope, $(this), {
        tips: [1, '#41B5CC'],
        time: -1
    });
});
$("#scope").mouseout(function() {
    layer.close(tipIndex);
});

加载是否功能

样式

<script type="text/javascript" src="/rom/maincustinfo/layui/layui.all.js"></script>
    <style>
        .mainBody {
            width: 100%;
            margin-top: 0.2rem;
            padding: 0 0.15rem;
        }

        .mainBody > div {
            width: 100%;
            background: rgba(238, 237, 237, 1);
        }

        .mainBody > div .mainDiv {
            width: 100%;
        }

        .mainBody > div .mainDiv .top {
            height: 0.4rem;
            width: 100%;
            position: relative;
        }

        .mainBody > div .mainDiv .top img {
            height: 100%;
            width: auto;
            position: absolute;
            top: 0;
            left: 0;
        }

        .mainBody > div .mainDiv .top .txt {
            position: absolute;
            line-height: 0.4rem;
            left: 0.2rem;
            color: #fff;
        }

        .submit {
            position: fixed;
            bottom: 0rem;
            width: 96%;
            height: 0.6rem;
            line-height: 0.6rem;
            background-color: #fff;
            text-align: center;
        }

        .submit > button {
            width: 30%;
            height: 66%;
            background-color: rgb(204, 204, 204);
            border-radius: 4px;
            color: #fff;
            font-size: 0.18rem;
        }

        /*表格样式*/
        .table_tr {
            background-color: #658AFB !important;
            color: white;
        }

        .layui-table td, .layui-table th {
            text-align: center;
        }

        .question {
            width: 90%;
            /*margin: 0 auto;*/
            margin-left: 5%;
            padding: 10px 2px 8px 2px;
            background: white;
            overflow-y: auto;
        }

        .question .quest_item {
            width: 100%;
            background: white;
            margin-bottom: 5px;
        }

        .question .quest_item .quest_tit {
            width: 100%;
            /*line-height: 0.25rem;*/
            min-height: 0.35rem;
            font-weight: bold;
        }

        .question .quest_item .quest_cont {
            width: 100%;
            padding: 0.39rem;
            margin-top: 1%;
        }

        .question .quest_item .quest_cont .answers {
            width: 100%;
            padding: 0.35rem;
        }

        .question .quest_item .quest_cont .answers > li {
            /*float: left;*/
            /*width: 45%;*/
            margin-right: 0.1rem;
            cursor: pointer;
            padding: 0.2rem;
        }

        .question .quest_item .quest_cont .answers > li > div {
            float: left;
        }

        .question .quest_item .quest_cont .answers > li .select {
            width: 6%;
        }

        .question .quest_item .quest_cont .answers > li .select img {
            width: 0.6rem;
            height: 0.6rem;
        }

        .question .quest_item .quest_cont .answers > li .answer {
            width: 85%;
            word-wrap: break-word;
            word-break: normal;
        }

    </style>

<div class="mainDiv">
				<!--问题列表-->
				<div class="question"
					 style="position: absolute; margin-left: 2%;width: 29rem;">
                    <span id="one" class="spanId"
						  style=" cursor: pointer;font-size: 17.5px;display: block;line-height: 160%;"></span>
					<span id="two"
						  style="cursor: pointer;font-size: 16.5px;display: block;padding: 1%;margin-left: 12px;line-height:170%;text-indent: 1em;"></span>
					<span id="three"
						  style="cursor: pointer;font-size: 16.5px;display: block;padding: 2%;text-indent: 1em; line-height: 134%;"></span>
					<div class="quest_item">
						<div class="quest_cont"><span id="oneQuerstion"
													  style="font-size: 16.5px;line-height: 1.7;"></span>
							<ul class="answers clearfix">
								<li class="optionItem clearfix">
									<div class="select">
										<img src="/romm/common/imgs/select.png" alt="">
									</div>
									<div class="answer">
										<span style="font-weight: bold">是</span>
									</div>
									<input type="hidden" value="1">
								</li>
								<li class="optionItem clearfix">
									<div class="select">
										<img src="/romm/common/imgs/select.png" alt="">
									</div>
									<div class="answer">
										<span style="font-weight: bold">否</span>
									</div>
									<input type="hidden" value="0">
								</li>
							</ul>
						</div>
					</div>
				</div>
</div>

2.js处理 获取选择的是还是否

  var answers = '';
    $('.optionItem').each(function () {
        var src = $(this).find("img").attr('src');
        if (src == '/romm/common/imgs/selected.png') {
            answers += $(this).find("input").val() + ',';
        }
    });
    //截取掉最后一位
    answers = answers.substring(0, answers.length - 1);