站长资源网络编程
jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
简介最终效果： 复制代码 代码如下: 弹出层插件:jquery.artwl.thickbox</div>
<div class="news_infos"><div id="MyContent">最终效果： <BR><U>复制代码</U> 代码如下: <BR><!DOCTYPE html> <BR><html> <BR><head> <BR><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <BR><title>弹出层插件:jquery.artwl.thickbox.js</title> <BR><script src="/UploadFiles/2021-04-02/jQuery-1.7.1.js"><script type="text/javascript"> <BR>/* File Created: 三月 1, 2012 Author:artwl */ <BR>;(function ($) { <BR>$.extend({ <BR>artwl_bind: function (options) { <BR>options=$.extend({ <BR>showbtnid:"", <BR>title:"", <BR>content:"" <BR>},options); <BR>var mask = '<div id="artwl_mask"></div>'; <BR>var boxcontain = '<div id="artwl_boxcontain">\ <BR><a id="artwl_close" href="javascript:void(0);" title="Close"></a>\ <BR><div id="artwl_showbox">\ <BR><div id="artwl_title">\ <BR><h2>\ <BR>Title</h2>\ <BR></div>\ <BR><div id="artwl_message">\ <BR>Content<br />\ <BR></div>\ <BR></div>\ <BR></div>'; <BR>var cssCode = 'html, body, h1, h2, h3, h4, h5{margin: 0px;padding: 0px;}\ <BR>#artwl_mask{background-color: #000;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.5;filter: alpha(opacity=50);display: none;}\ <BR>#artwl_boxcontain{margin: 0 auto;position: absolute;z-index: 2;line-height: 28px;display: none;}\ <BR>#artwl_showbox{padding: 10px;background: #FFF;border-radius: 5px;margin: 20px;min-width:300px;min-height:200px;}\ <BR>#artwl_title{position: relative;height: 27px;border-bottom: 1px solid #999;}\ <BR>#artwl_close{position: absolute;cursor: pointer;outline: none;top: 0;right: 0;z-index: 4;width: 42px;height: 42px;overflow: hidden;background-image: url(/upload/201203/20120301220903376.png);_background: none;}\ <BR>#artwl_message{padding: 10px 0px;overflow: hidden;line-height: 19px;}'; <BR>if ($("#artwl_mask").length == 0) { <BR>$("body").append(mask + boxcontain); <BR>$("head").append("<style type='text/css'>" + cssCode + "</style>"); <BR>if(options.title!=""){ <BR>$("#artwl_title").html(options.title); <BR>} <BR>if(options.content!=""){ <BR>$("#artwl_message").html(options.content); <BR>} <BR>} <BR>$("#"+options.showbtnid).click(function () { <BR>var height = $("#artwl_boxcontain").height(); <BR>var width = $("#artwl_boxcontain").width(); <BR>$("#artwl_mask").show(); <BR>$("#artwl_boxcontain").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); <BR>if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { <BR>width = $(window).width() > 600 ? 600 : $(window).width() - 40; <BR>$("#artwl_boxcontain").css("width", width + "px").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); <BR>$("#artwl_mask").css("width", $(window).width() + "px").css("height", $(window).height() + "px").css("background", "#888"); <BR>$("#artwl_close").css("top", "30px").css("right", "30px").css("font-size", "20px").text("关闭"); <BR>} <BR>}); <BR>$("#artwl_close").click(function () { <BR>$("#artwl_mask").hide(); <BR>$("#artwl_boxcontain").hide(); <BR>}); <BR>}, <BR>artwl_close:function(options){ <BR>options=$.extend({ <BR>callback:null <BR>},options); <BR>$("#artwl_mask").hide(); <BR>$("#artwl_boxcontain").hide(); <BR>if(options.callback!=null){ <BR>options.callback(); <BR>} <BR>} <BR>}); <BR>})(jQuery); <BR>$(function () { <BR>$.artwl_bind({ showbtnid: "btn_show", title: "From Cnblogs Artwl", content: $("#Content").html() }); <BR>}); <BR>function test() { <BR>alert("Before close"); <BR>$.artwl_close({ callback: other }); <BR>} <BR>function other() { <BR>alert("After close"); <BR>} <BR></script> <BR></head> <BR><body> <BR><h3>弹出层插件jquery.artwl.thickbox.js(https://www.jb51.net)</h3> <BR><input type="button" value="Click Me" id="btn_show" /> <BR><span id="Content" style="display:none;"> <BR><a href="https://www.jb51.net">Artwl</a><br /> <BR><input type="button" onclick="test()" value="Test"/> <BR></span> <BR></body> <BR></html> <BR> <BR>插件原理 <BR> 所有弹出层的原理都差不多，就是用一个全屏半透明DIV做遮罩层，在这个遮罩层上再显示出一个层放要显示的内容，其他的就是CSS的运用了。 <BR> 本插件为了使用简单，把JS跟CSS封装在了一个JS文件(插件)中，所以使用起来非常方便，做到了一行代码调用。 <BR>插件源代码 <BR> 插件(jquery.artwl.thickbox.js)的源码如下： <BR><U>复制代码</U> 代码如下: <BR>/* File Created: 三月 1, 2012 Author:artwl blog:http://artwl.cnblogs.com */ <BR>;(function ($) { <BR>$.extend({ <BR>artwl_bind: function (options) { <BR>options=$.extend({ <BR>showbtnid:"", <BR>title:"", <BR>content:"" <BR>},options); <BR>var mask = '<div id="artwl_mask"></div>'; <BR>var boxcontain = '<div id="artwl_boxcontain">\ <BR><a id="artwl_close" href="javascript:void(0);" title="Close"></a>\ <BR><div id="artwl_showbox">\ <BR><div id="artwl_title">\ <BR><h2>\ <BR>Title</h2>\ <BR></div>\ <BR><div id="artwl_message">\ <BR>Content<br />\ <BR></div>\ <BR></div>\ <BR></div>'; <BR>var cssCode = 'html, body, h1, h2, h3, h4, h5{margin: 0px;padding: 0px;}\ <BR>#artwl_mask{background-color: #000;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.5;filter: alpha(opacity=50);display: none;}\ <BR>#artwl_boxcontain{margin: 0 auto;position: absolute;z-index: 2;line-height: 28px;display: none;}\ <BR>#artwl_showbox{padding: 10px;background: #FFF;border-radius: 5px;margin: 20px;min-width:300px;min-height:200px;}\ <BR>#artwl_title{position: relative;height: 27px;border-bottom: 1px solid #999;}\ <BR>#artwl_close{position: absolute;cursor: pointer;outline: none;top: 0;right: 0;z-index: 4;width: 42px;height: 42px;overflow: hidden;background-image: url(/Images/feedback-close.png);_background: none;}\ <BR>#artwl_message{padding: 10px 0px;overflow: hidden;line-height: 19px;}'; <BR>if ($("#artwl_mask").length == 0) { <BR>$("body").append(mask + boxcontain); <BR>$("head").append("<style type='text/css'>" + cssCode + "</style>"); <BR>if(options.title!=""){ <BR>$("#artwl_title").html(options.title); <BR>} <BR>if(options.content!=""){ <BR>$("#artwl_message").html(options.content); <BR>} <BR>} <BR>$("#"+options.showbtnid).click(function () { <BR>var height = $("#artwl_boxcontain").height(); <BR>var width = $("#artwl_boxcontain").width(); <BR>$("#artwl_mask").show(); <BR>$("#artwl_boxcontain").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); <BR>if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { <BR>width = $(window).width() > 600 ? 600 : $(window).width() - 40; <BR>$("#artwl_boxcontain").css("width", width + "px").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); <BR>$("#artwl_mask").css("width", $(window).width() + "px").css("height", $(window).height() + "px").css("background", "#888"); <BR>$("#artwl_close").css("top", "30px").css("right", "30px").css("font-size", "20px").text("关闭"); <BR>} <BR>}); <BR>$("#artwl_close").click(function () { <BR>$("#artwl_mask").hide(); <BR>$("#artwl_boxcontain").hide(); <BR>}); <BR>}, <BR>artwl_close:function(options){ <BR>options=$.extend({ <BR>callback:null <BR>},options); <BR>$("#artwl_mask").hide(); <BR>$("#artwl_boxcontain").hide(); <BR>if(options.callback!=null){ <BR>options.callback(); <BR>} <BR>} <BR>}); <BR>})(jQuery); <BR> <BR>调用也非常简单，在页面引入此JS文件后，在页面加载方法中调用如下代码即可： <BR>$.artwl_bind({ showbtnid: "btn_show", title: "From Cnblogs Artwl", content: $("#Content").html() }); <BR> 这三个参数非常简单，第一个是弹出层触发事件的元素ID，第二个为弹出层的标题，第三个为弹出层的内容 <BR>注意事项 <BR> 为了使用方便，本插件把JS跟CSS写在了一个文件中，如果要调整弹出层的样式可以修改如下CSS即可。 <BR> 插件CSS代码： <BR><U>复制代码</U> 代码如下: <BR>html, body, h1, h2, h3, h4, h5 { <BR>margin: 0px; <BR>padding: 0px; <BR>} <BR>#artwl_mask { <BR>background - color: #000; <BR>position: absolute; <BR>top: 0px; <BR>left: 0px; <BR>width: 100%; <BR>height: 100%; <BR>opacity: 0.5; <BR>filter: alpha(opacity= 50); <BR>display: none; <BR>} <BR>#artwl_boxcontain { <BR>margin: 0 auto; <BR>position: absolute; <BR>z - index: 2; <BR>line - height: 28px; <BR>display: none; <BR>} <BR>#artwl_showbox { <BR>padding: 10px; <BR>background: #FFF; <BR>border - radius: 5px; <BR>margin: 20px; <BR>min - width: 300px; <BR>min - height: 200px; <BR>} <BR>#artwl_title { <BR>position: relative; <BR>height: 27px; <BR>border - bottom: 1px solid #999; <BR>} <BR># artwl_close { <BR>position: absolute; <BR>cursor: pointer; <BR>outline: none; <BR>top: 0; <BR>right: 0; <BR>z - index: 4; <BR>width: 42px; <BR>height: 42px; <BR>overflow: hidden; <BR>background - image: url(/Images/feedback - close.png); <BR>_background: none; <BR>} <BR>#artwl_message { <BR>padding: 10px 0px; <BR>overflow: hidden; <BR>line - height: 19px; <BR>} <BR> <BR>另外，针对IE6不支持透明作了特殊处理，在IE6下显示为：
<P style="TEXT-ALIGN: center"><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20120301220903919.jpg');"><img src="/UploadFiles/2021-04-02/20120301220903919.jpg" alt="jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></P>
<P style="TEXT-ALIGN: center">IE6</P>
<P style="TEXT-ALIGN: center"><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20120301220903608.jpg');"><img src="/UploadFiles/2021-04-02/20120301220903608.jpg" alt="jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></P>
<P style="TEXT-ALIGN: center">其他浏览器</P><BR>Demo下载地址：http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar</div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/124673.html" title="Jquery提交表单 Form.js官方插件介绍">Jquery提交表单 Form.js官方插件介绍</a></p>
<p>下一篇：<a href="/3g/1/124675.html" title="jQuery AJAX实现调用页面后台方法和web服务定义的方法分享">jQuery AJAX实现调用页面后台方法和web服务定义的方法分享</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604673.html"><ul>高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布<br><br>高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。<br>在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。<br>预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。<br>谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。</ul></a></div>
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>