时间:2021-07-01 10:21:17 帮助过:6人阅读
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>
<script src="jquery.cvbox.min.js" type="text/javascript"></script>
<style type="text/css">
DIV.postCon {
FONT-SIZE: 12px; COLOR: #666666
}
DIV.postBody {
FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 150%
}
.mySearch {
DISPLAY: none
}
#mainContent {
MARGIN-TOP: 5px; MARGIN-LEFT: 5px
}
#author_profile {
DISPLAY: none
}
.postCon A {
COLOR: #0099ff
}
.postBody A {
COLOR: #0099ff
}
.feedbackCon A {
COLOR: #0099ff
}
#sideBar {
BORDER-RIGHT: #ced7ce 1px solid; BORDER-TOP: #ced7ce 1px solid; MARGIN: 0px 0px 0px 4px; BORDER-LEFT: #ced7ce 1px solid; WIDTH: auto; BORDER-BOTTOM: #ced7ce 1px solid; POSITION: fixed; TOP: 24%
}
.newsItem {
DISPLAY: none
}
#calendar {
DISPLAY: none
}
.catListLink {
DISPLAY: none
}
.catListComment {
DISPLAY: none
}
.catListFeedback {
DISPLAY: none
}
#sideBarMain {
DISPLAY: none
}
#EntryTag {
DISPLAY: none
}
.catListTag {
DISPLAY: none
}
.cvBoxShade {
Z-INDEX: 2000; BACKGROUND: #ccc; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 0px
}
.cvBoxBorder {
BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 8px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; Z-INDEX: 2000; PADDING-BOTTOM: 8px; BORDER-LEFT: #000000 0px solid; WIDTH: 100%; PADDING-TOP: 8px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BACKGROUND-COLOR: #ccc
}
.cvBoxBorder A {
COLOR: #486aaa; TEXT-DECORATION: none
}
.cvBoxBorder A:hover {
COLOR: #c00; TEXT-DECORATION: none
}
.cvBoxTitleBar {
WIDTH: 100%; LINE-HEIGHT: 27px; HEIGHT: 26px; BACKGROUND-COLOR: #eeeeee
}
.cvBoxTitleBarText {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; COLOR: #333
}
.cvBoxTitleBarClose {
PADDING-RIGHT: 10px; FLOAT: right; COLOR: #3867af; FONT-FAMILY: Verdana
}
.cvBoxTitleBarClose IMG {
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 4px 0px 0px; BORDER-RIGHT-WIDTH: 0px
}
.cvBoxBody {
WIDTH: 100%; BACKGROUND-COLOR: #ffffff
}
.cvBoxBodyBtn {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px
}
.cvBoxBodyBtn P {
MARGIN: 20px 0px 0px
}
.cvBoxBtnSubmit {
BORDER-RIGHT: #34538b 1px solid; BORDER-TOP: #34538b 1px solid; BACKGROUND: #486aaa; BORDER-LEFT: #34538b 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #fff; LINE-HEIGHT: 23px; BORDER-BOTTOM: #34538b 1px solid; HEIGHT: 24px
}
.cvBoxBtnCancel {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #eee; BORDER-LEFT: #ccc 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #333; LINE-HEIGHT: 23px; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 24px
}
.cvBoxClear {
CLEAR: both; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px
}
</style>
<body>
<div>
未压缩版本是6K大小,压缩后只有2K大,应该算很轻了。</div>
<div> </div>
<div id="jquerycvbox">
<div>
<a id="A1" href="javascript:void(0);">1.弹出提示框,点击查看效果。</a>
<script type="text/javascript">// <![CDATA[
$("#A1").click(function() {
$(this).cvbox({
titleBarText: "弹出提示框",
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚"
});
});
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:javascript">$(this).cvbox({
titleBarText: "弹出提示框",
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚"
});
</pre>
</div>
<div>
<a id="A2" href="javascript:void(0);">2.弹出提示框1秒后自动关闭,点击查看效果。</a>
<script type="text/javascript">// <![CDATA[
$("#A2").click(function() {
$(this).cvbox({
titleBarText: "弹出提示框1秒后自动关闭",
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚",
delayClose: 1000
});
});
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:javascript">$("#A2").click(function() {
$(this).cvbox({
titleBarText: "弹出提示框1秒后自动关闭",
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚",
delayClose:1000
});
});
</pre>
</div>
<div>
<a id="A3" href="javascript:void(0);">3.弹出对话框,点击查看效果。</a>
<script type="text/javascript">// <![CDATA[
$("#A3").click(function() {
$(this).cvbox({
titleBarText: "弹出对话框",
confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br /><br />你确认你爸是李刚吗?",
submitAfter: HelloLiGang
});
});
function HelloLiGang() {
alert("对您爸爸的敬仰犹如滔滔江水连绵不绝!");
}
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:javascript">$("#A3").click(function() {
$(this).cvbox({
titleBarText: "弹出对话框",
confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br
/><br />你确认你爸是李刚吗?",
submitAfter:HelloLiGang
});
});
function HelloLiGang(){
alert("对您爸爸的敬仰犹如滔滔江水连绵不绝!");
}
</pre>
</div>
<div>
<a id="A4" href="javascript:void(0);">4.载入一段HTML内容,点击查看效果。</a>
<div class="A4Demo" style="display: none; width: 550px; padding: 10px;">
<div>
通常这段内容的display都设置为hidden,此处只是为了演示该HTML内容是在当前页面,而不是动态write出来的,可查看页面源文
件。
<br />
内容可以是任意元素,包括iframe也可以。
</div>
<div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
$("#A4").click(function() {
$(".A4Demo").cvbox({
titleBarText: "载入一段HTML内容"
});
});
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:html"><div class="A4Demo" style="display:none; width:550px; padding:10px; ">
<div>
通常这段内容的display都设置为hidden,此处只是为了演示该HTML内容是在当前页面,而不是动态write出来的,可查看页面源文件。
<br />
内容可以是任意元素,包括iframe也可以。
</div>
<div>
<iframe width="100%" frameborder="0" src="http://a.cvimg.cn/UploadFile/MiniBlog/2010/10-20/7a09cf13-eeb6-491b-aa63-
18dd67bde0a1_Big.jpg"></iframe>
</div>
</div>
</pre>
</div>
<br />
<div class="jb51_Highlighter">
<pre class="brush:javascript">$("#A4").click(function() {
$(".A4Demo").cvbox({
titleBarText: "载入一段HTML内容"
});
});
</pre>
</div>
</div>
<div>
<br />目前只是很简单的应用,后续增加位置的参数,使对话层不局限于只显示在屏幕中间。
</div>
<div id="c_jquery_test" style="display:none"></div>
<script type="text/javascript">
if ($ != jQuery) {
$ = jQuery.noConflict();
}
</script>
</body>