HTML 应用 遮罩

遮罩的应用太多了,这里会分析一下

bootstrap 模态框

实现方式 示例看这里:http://v3.bootcss.com/javascript/#modals

fixed的布局

    fixed 半透明背景

    relative 的内容区域

为了防止body的滚动,对body 增加了一个modal-open class,这个是把overflow 设置为hidden防止body滚动,不过再移动浏览器上,不好使,依然会滚动的。


jquery modaldialog 弹出对话框

http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/ 

fixed 遮罩背景

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



你可能感兴趣的:(HTML 应用 遮罩)