怎么在php弹出js,如何用JS实现简单弹出框

有两个p组成了弹出框。两个p的级别是兄弟关系。

其中一个p是为了遮挡后面的内容

第二个p是为了显示弹出框的实际内容

HTML部分

!-- 这个是用来遮罩的 -->

X

弹出窗口

CSS部分

// 遮挡部分CSS#modelp { height: 100%;

width: 100%;

// 页面定位到最上面

position: absolute;

top:0;

left:0;

background: silver;

// 透明度这样能看到后面的内容效果真实一些

opacity:0.8;

// 遮挡级别最好高一些，防止别的内容会突然出现在你的弹出层上面，这就尴尬了。

z-index: 99;

} // 弹出框内容CSS

#model { width: 300px;

height: 200px;

background: #959FA9;

border-radius: 10px;

padding: 15px;

position: absolute;

top: 200px;

left: 42%;

z-index: 99;

}

JavaScript部分

// 页面一进入就打开了弹出框。所以直接遮挡// 此处是用来解决如果你的页面过大会出现滚动条，这样遮罩层只能遮挡你的可见部分滚动内容无法折腾的问题。document.body.style.overflow = 'hidden';/**

* 关闭弹出框的功能

*/function closeModel() {

document.getElementById("model").style.display = 'none';

document.getElementById("modelp").style.display = 'none'; // 不遮挡后面的内容将body设置为原始样式，也就是实现可滚动

document.body.style.overflow = 'auto';

}