遮罩的应用太多了,这里会分析一下javascript
bootstrap 模态框css
实现方式 示例看这里:http://v3.bootcss.com/javascript/#modals
html
fixed的布局java
fixed 半透明背景jquery
relative 的内容区域web
为了防止body的滚动,对body 增长了一个modal-open class,这个是把overflow 设置为hidden防止body滚动,不过再移动浏览器上,很差使,依然会滚动的。bootstrap
jquery modaldialog 弹出对话框
浏览器
http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/ 布局
fixed 遮罩背景ui
fixed 内容区域,这个是采用js计算出来位置的。并无对body滚动作处理。很简洁。
jquery ui dialog 对话框模态框 http://jqueryui.com/dialog/#modal-form
absolute 内容区域,由js计算位置
fixed 遮罩(overlay)
remodal
http://www.yyyweb.com/demo/inner-show/remodal.html 实现接近bootstrap