原创

Jquery 实现遮盖背景并弹出炫丽的对话框

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页,下面为大家具体讲述一下 Jquery 实现遮盖背景并弹出炫丽的对话框,涉及到了 Jquery 各类插件。

Jquery 实现遮盖并弹出对话框,需要引入三个文件以及图片(图片不引入不报错)具体包括如下:

jquery-1.10.2.min.js
jquery-ui.min.js
jquery-ui.min.css

Html 页面内容,具体代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<script src="http://www.yoodb.com/front/js/jquery-1.10.2.min.js"></script>
<script src="http://www.yoodb.com/front/js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.yoodb.com/front/js/jquery-ui.min.css">
<title>欢迎收藏 www.yoodb.com</title> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
$( "#dianji" ).bind('click',function(event) { 
$( "#checkandPass" ).dialog({ 
autoOpen: true, 
width: 230, 
show: "blind", 
hide: "explode", 
modal: true,//设置背景灰
}); 
return true; 
}); 
}); 
</script> 
</head> 
<body>
<div> 
<input type="button"id="dianji"value="Click me"/> 
</div>
<div id="checkandPass" title="签到情况" style="display: none;"> 
<div style="font-size:15px;font-family: '微软雅黑';"> 
恭喜您签到成功,本次获得&nbsp;<span id="userjf" style="color:red;font-weight: bold;">12</span>&nbsp;积分。O(∩_∩)O~~
</div> 
</div> 
</body> 
</html>
~阅读全文-人机检测~

微信公众号“Java精选”(w_z90110),专注Java技术干货分享!让你从此路人变大神!回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。微信搜索小程序“Java精选面试题”,内涵3000+道Java面试题!

涵盖:互联网那些事、算法与数据结构、SpringMVC、Spring boot、Spring Cloud、ElasticSearch、Linux、Mysql、Oracle等

评论

分享:

支付宝

微信