juery框架写的弹窗效果适合新手


Posted in Javascript onNovember 27, 2013

本人新手写点代码有点村,希望大家多多包含!!!!!!

<html> 
<head> 
<title>js弹窗效果</title> 
<meta http-equiv="content-type" content="text/html charset=gb2312"> 
<script language="javascript" src="jquery-1.4.js"></script> 
</head> <script language="javascript"> 
//document.body.offsetWidth="512px"; 
function mina(){ 
$("#dv").css("display","block"); 
var a = $(document).height(); 
var b = $(window).width(); 
var h =$(window).height(); 
f = (b-300)/2; 
d =(h-300)/2; 
$("#dv").css("margin-top",d); 
$("#dv").css("margin-left",f); 
$("#zhezhao").toggle(); 
$("#zhezhao").css("width",b); 
$("#zhezhao").css("height",a); 
} 
function nin(){ 
$("#dv").css("display","none"); 
$("#zhezhao").toggle(); 
} 
</script> 
<body> 
<div style="display:none;position:absolute;z-index:100;background:#ccc" id="zhezhao"></div> 
<input type="button" value="点击" onclick="mina()"> 
<div id="dv" style="width:300px;height:300px;border:1px solid red;display:none;position:absolute;z-index:1000;background:white;"> 
<div><span id="ss"style="width:30px;height:30px;border:1px solid blue;background:black;float:right;" onclick="nin()"></span></div> 
</div> 
<table align="center" border="1" width="888" height="668"> 
<tr> 
<td align="center">haha</td> 
</tr> 
</table> 
</body> 
</html>

如果对你有帮助也算没有白白上传!!!!!!(需要了解jquery框架)
Javascript 相关文章推荐
JavaScript 学习笔记之操作符
Jan 14 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 #Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 #Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 #Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 #Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 #Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 #Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 #Javascript
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
JS中Location使用详解
2015/05/12 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python常见的pandas用法demo示例
2019/03/16 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python manage.py runserver流程解析
2019/11/08 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
法国足球商店:Footcenter
2019/07/06 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
幼儿园门卫岗位职责范本
2014/07/02 职场文书
欢迎新生标语
2014/10/06 职场文书
诉讼和解协议书
2016/03/23 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript