前端点击某个组件在组件下方弹出一个对话框

废话不说直接上代码

引入layui

js代码

            function opem(e){
                var value = e.getAttribute('value'); //获取上面value的值
                var name = e.getAttribute('name');//获取上面name的值
                var id = e.getAttribute('id');//获取上面id的值
                $("#"+id).attr('onblur','shiqu("' + id + '","stopValue")');
                var p = $(e).offset(); //获取鼠标坐标
                var top;
                if(document.documentElement.scrollTop>0){//页面翻页定位会不准加此判断可结决
                    top=p.top+30-document.documentElement.scrollTop;
                }
                else{
                    top=p.top+30;
                }
                layer.open({
                    type: 1,
                    title: name,
                    shadeClose: true,
                    closeBtn: 1,
                    shift:7,
                    anim: 1,//由上往下弹出
                    shade: 0.1,
                    resize:false,//禁止拉伸
                    move: false,//禁止拖拽
                    offset:[''+top+'px',''+p.left+'px'],//坐标
                    area: ['250px', '300px'], //宽高
                    content:'<div style="padding: 50px; line-height: 22px; width: 250px; height: 300px">      <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="true"></select> </div>'

                });
                $('#usertype').selectpicker({
                    'selectedText': 'cat'
                });

html

<button type="button" onclick="open(this)">弹窗</button>

我这里还引入了bootstrap-select 复选下拉框，效果如下

无论在表格那个地方都会在所点击按钮下方弹窗