[置顶] 前端:两种实现带背景遮罩的弹窗写法
2015-05-27 20:07
253 查看
1. 第一种 使用css+jquery实现效果
直接上案例分析,下面一一列出样式文件和js文件以及html页面上的使用例子。css文件如下:
.black_overlay{ display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .dialog_content { display: none; position: fixed; top: 30%; left: 30%; background-color: white; z-index: 1002; overflow: auto; border: 5px solid #ADD8E6; padding: 10px 10px 10px 10px; }
js文件如下:
/*** 弹出隐藏层
*
* @param bg_div
*/
function ShowDiv(bg_div, show_div) {
$("#" + bg_div).show();
$("#" + show_div).show();
};
/**
* 关闭弹出层
*
* @param bg_div
*/
function CloseDiv(bg_div, show_div) {
$("#" + bg_div).hide();
$("#" + show_div).hide();
};
Html页面文件:
<div id="memoInfo" class="dialog_content" >
<span><b>备注信息</b></span>(请不要超过200字)</br></br>
备注:<textarea rows="2" cols="40" name="memoContent" id="memoContent" ></textarea></br></br>
<input type="button" value="提交" onclick="memoApplyVip()" style="margin-left:60%;">
<input type="button" value="取消" onclick="CloseDiv('memoInfobg','memoInfo')" style="margin-left:10%;">
</div>
2.第二种: 使用jqModal插件实现
jqModal资料网站:http://jquery.iceburg.net/jqModal/jqModal.js和jqModal.css 文件下载:
使用jqModal插件比较简单,样式和js都不需要自己实现,同样直接上案例分析:
Html页面文件:
<div id="alertBlock" class="jqmDialog"> <span class="closeBox"> <a href="javascript:$('#alertBlock').jqmHide();" class="jqmClose" style="text-decoration: none;">X</a> </span> </div> Js文件: <link href="/css/dialogModal.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="/js/jquery-1.8.1.js"></script> <script type="text/javascript" language="javascript" src="/js/jqModal.js"></script> /** *在js初始化,初始化jqModal插件 */ $(function() { $('#alertBlock').jqm(); }) /** *直接做一个dialog调用函数;做一些操作 */ dialog function(){ $("#alertBlock").jqmShow(); }
相关文章推荐
- jQuery实现点击弹出背景变暗遮罩效果实例代码
- 设置UILabel背景和文字的透明度(代码和SB两种实现)
- vue-router 源码实现前端路由的两种方式
- [置顶] java面试题:java中的单例设计模式及两种实现方法的代码举例
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
- 在Activity内和Dialog弹窗两种情况下,实现自动弹出软键盘
- 用html5+flash两种方案实现前端长文转图
- oracle实现left join的两种写法
- web前端组件开发 之 弹窗组件实现
- cocos2dx实现遮罩的两种方法
- [置顶] Java多线程(一)——实现多线程的两种方式
- [置顶] 原生JS实现一个简单的前端路由(路由实现的原理)
- Bootstrap实现下拉列表的两种写法
- 使用PopupWindow和Activity两种不同的方式实现弹窗效果
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
- 两种实现flash遮罩的方法
- 使用PopupWindow和Activity两种不同的方式实现弹窗效果
- 优秀前端教程:实现图片的形状遮罩和动画放大效果
- SQL用临时表加while遍历行实现有条件的自增长 另case when的两种写法
- JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例