原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

相关推荐

评论

分享:

支付宝

微信