使用jquery实现模态框（alert弹出层）

弹出层外框样式：

注：只提供了弹出层外框样式

        .alert-content{
            width:970px;
            height: 560px;
            position: absolute;
            top: 10px;
            left:calc(50% - 500px);//弹出框相对屏幕居中
            background:#fff;
            box-shadow: 5px 5px 5px 5px #999;
            color:#666;
            border:1px solid #f8f8f8;
            border-radius:2px;
        }

js代码：

var alertcontent ="<div class='alert-content'><div class='msy-top'>选择人员<button class='si si-com_error-49' onclick='closealert()' style='color:black;background-color:white;border:0px solid red;float:right;'></button>\
</div><div class='msg-content'><div class='msg-content-check'><table id='table1'><tr id='tr1'><td id='inputname'><input placeholder='&nbsp;&nbsp;姓名'>\
</td><td id='inputzj'><select><option>身份证</option>\
<option>身份证</option>\
<option>身份证</option>\
<option>身份证</option>\
 </select>\等等......</div>"
//弹出方法
function alert(e) {
  $('main').append(alertcontent)//在main内部结尾处添加模态框，利用上述css代码改变位置
}
//关闭弹出层
function closealert(){
  $('.alert-content').remove()
}