怎么在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';

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值