html5弹出阴影遮罩_html 中弹出遮罩层设置

host

.hide{

display: none;

}

.shade{

position: fixed;

top:0;

right: 0;

left: 0;

bottom: 0;

background: black;

opacity: 60%;

z-index: 100;

}

.add_modal{

position: fixed;

height: 300px;

width: 400px;

top: 100px;

left: 50%;

z-index: 101;

border: 1px solid red;

background: white;

margin-left: -200px;

}

主机信息(对象)

序号主机名IP端口业务线

{% for row in v1 %}

{{ forloop.counter }}{{ row.hostname }}{{ row.ip }}{{ row.port }}{{ row.b.caption }}

{% endfor %}

{% for row in b_list %}

{{ row.caption }}

{% endfor %}

$(function () {

$('#add_host').click(function () {

$('.shade,.add_modal').removeClass('hide');

});

$('#cancel').click(function () {

$('.shade,.add_modal').addClass('hide');

});

})