以前做过弹出框 但都是那还总alter弹出的小窗口,现在很不好用,大部分都是弹出一个面板,并且是显示页面中间,随着滚动条的滚动,div面板始终会在页面中间显示。下面那我们来看看代码:
首先,先把jsp页面的代码归置好:
<a href="javascript:void(0)" onclick="ShowDiv('MyDiv','fade')">点击显示面板</a>
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content" >
<div class="popbox">
<span class="poptit">标题</span><span class="close-but" onclick="CloseDiv('MyDiv','fade')"><img src="style/images/close-but.png" /></span>
</div>
<div class="clear"></div>
<div class="popcontent">
<form action="addnews" method="post" name="onlinemodel" id="form1">
<table class="table-noborder">
<tr>
<td class="ri"><span class="red"> * </span>联系人:</td>
<td><input type="text" size="47" /></td>
</tr>
</table>
<div class="clearfix"></div>
<div class="but-box">
<span class="ml20"><a href="#" class="btn-gray" name="closenew" onclick="closenew()" >取消</a></span>
</div>
<div class="clear"></div>
</form>
</div>
</div>
紧接着写事件代码:
<script language="javascript" type="text/javascript">
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
$("#"+bg_div).height($(document).height());
};
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
最后用美化一下,这样是是根据我自己当时的需求写的,可能有的你估计用不到,既然看到这里,说明你对样式还是略懂的,自己看着增减吧:
.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: #999;z-index:1001;-moz-opacity: 0.7;opacity:.70;filter: alpha(opacity=70);}
.white_content {display: none;position: absolute;top: 18%;left: 24%;width:52%;height: 50%;background-color: white;z-index:1002;
margin-left:-20px!important;/* FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/* FF IE7 该值为本身高的一半 */
margin-top:0px;
position:fixed!important;/* FF IE7 */
position:absolute;/* IE6 */
}
.popbox{ width:100%; height:40px; margin:0; padding:0;overflow:hidden; background:url(../images/dialog-title.jpg) left top no-repeat;border:0;}
.popcontent{background-color:#fff;}
.close-but{ float:right; margin:12px 5px 5px 10px;text-align:center; cursor:pointer;}
.poptit{float:left; padding:10px; color:#fff; font-size:14px; font-weight:bold;}
.but-box{text-align:center; padding:10px 15px;}
相关推荐
此项目是在MVC5的框架里自己用Jquery写的一个弹出层居中,并显示半透明的遮罩,点击遮罩任意地方就隐藏弹出层
JQuery 弹出层,div始终显示在屏幕正中间
jQuery视频弹出效果,源码与DEMO,点击弹出视频,居中显示
摘要:VC/C++源码,界面编程,窗口居中 VC++让子窗口居中显示,打开主程序窗体后,在主窗体框架内弹出一新窗口,程序将自动设置新窗口居中于主窗口框架内,有意者请下载参阅源代码。
主要为大家详细介绍了weebox弹出窗口不居中显示的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ASP 开发实例 窗口一些设置实例 自动关闭的广告窗口 关闭弹出窗口刷新父窗口 居中显示弹出的窗口 鼠标指针滑过链接样式 离开时启动收藏夹 安徽机电职业技术学院 陈伟
http://blog.csdn.net/qqyangwang/article/details/8513662 文章的源码,欢迎下载。
弹出的消息框或另一个窗口在父窗口中间,希望大家喜欢。
有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。 $(document)是获取整个网页的,$(window)是获取当前窗体的,这...
Dialog弹出框自定义、button圆角阴影设置、弹出框圆角设置、弹出框内容显示动态传入、Dialog居中显示等
可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ipad等触屏设备优化;预先缓存皮肤图片更快响应…… 跨平台兼容 兼容:IE6+、Firefox、Chrome、Safari、Opera以及...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
内容索引:脚本资源,jQuery,jGrowl,jQuery插件,弹出框 jGrowl基于jQuery用于制作消息弹出框的插件。有矩形单色、圆角渐变色等,风格有将近5种吧,产生效果的类似于Mac、OSX系统中Growl事件通知的框架。测试了一下,...
提取自ZCMS的弹出框:代替window.open、window.alert、window.confirm;提供良好的用户体验; 水晶质感,设计细腻,外观漂亮; 兼容ie6/7/8、firefox2/3、Opera;弹出框在ie6下不会被select控件穿透; 无...
基于Q.js的UI库,包括遮罩层、弹出框、下拉列表、右键菜单、颜色选择器、选项卡、进度条、数据分页、无缝滚动等。 具体使用参见demo 弹出框、确认框、输入框、加载框等 /*ops : { title: "自定义标题", width: 420...
今天小编就为大家分享一篇layer.open的自适应及居中及子页面标题的修改方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
一个jQuery的弹出层插件,可以对指定内容进行弹出模式框显示,并始终于屏幕居中
弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/css"> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha...
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。 前言: 自适应内容 ...可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ip