制作一个在指定区域显示模态框

//添加权限模态框 
function addRoleModal() {    
    var $navPanelRight = $(".nav-panel-right")
    var $roleContent = $(".role-content")
    $roleContent.removeClass('hidden')
    $roleContent.css({
        top : $navPanelRight.position().top + 200,
        left : $navPanelRight.position().left + 270
    });
    $navPanelRight.append('<div class="mymodal"></div>')
    $('.mymodal').css({
        width:$navPanelRight.width(),
        height:$navPanelRight.height()
    })
    $navPanelRight.addClass('nav-right-opacity')
}

//移除权限模态框 
function removeRoleModal() {
    var $navPanelRight = $(".nav-panel-right")
    var $roleContent = $(".role-content")
    $roleContent.addClass('hidden')
    $('.mymodal').remove()
    $navPanelRight.removeClass('nav-right-opacity')
}

 

<div class="role-content hidden"><img src="/resources/img/users/warn.png"/><p>此功能为园所会员功能，非园所会员无法使用。</p>    <p>给您带来不便望请理解</p></div>

.role-content {
    width: 460px;
    height: 220px;
    position: absolute;
    background-color: #fff;
    opacity: 1;
    text-align: center;
    padding-top: 40px;
    box-shadow: 0px 5px 10px #d9d9d9;
    background-clip: padding-box;
}

.nav-right-opacity {
    opacity: 0.3;
}

.mymodal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

注意点：1、opacity设置后其子节点所有节点都是透明的

2、如果不想点击遮住的模态框，可以设置一个透明的遮罩层，就是上面的css .mymodal 

3、自己对比下与bootstrap的区别吧

总结三点：1、父节点透明，2、弹出框在body下、3、加个透明层防止点击遮罩的div