jQuery插件ccdialog 功能齐全的对话框效果【原创】

淅淅 2011-10-28 08:55:56

概述：ccdialog是一个jQuery插件，实现弹出层模式的对话框效果，由于不满足于jQuery本身的dialog插件功能和效果，所有参考了众多dialog插件的效果和实现方式写了ccdialog，功能和效果不逊于其他类似的对话框；压缩前大小：37k，压缩后大小：28k [注：采用一般压缩方法]。兼容IE6.0+、chrome、FF等多种主流浏览器，解决IE6下遮挡不住select的问题，适用于网站前后台开发，可取代原生态js的alert或者confirm等对话框以获取更好的UI效果。另外本插件的特色之一是多窗口显示及操作等功能，更多功能及使用方法请参考下面网址。
网址： http://www.5dcode.com/?page_id=373 http://www.5dcode.com/jquery.ccdialog.php
效果图：

http://static.oschina.net/uploads/code/201110/28010032_Ym1M.jpg
调用方法



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery.ccdialog</title>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="js/jquery.ccdialog-1.1.min.js"></script>

<script type="text/javascript">

$(function(){

    //jQuery.ccdialog

    $("#hello-ccdialog").click(function(){

        $("#test").ccdialog({

            width: 200,

            height: 'auto'

        });

    });           

});

</script>

</head>

<body>

<a href="#hello-ccdialog" id="hello-ccdialog" style="color:red;">点击看看效果</a>

<div id="test" style="display:none;">-----ccdialog-----<br /><br />*****hello　world*****</div>

</body>

</html>