头标签代码如下:
<link href="css/layerModel.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="js/jquery.layerModel.js"></script><script type="text/javascript">$(function(){ $("#demoBtn1").click(function(){ $('#demo1').layerModel({ blurClose : true }) })
})
body代码如下:
<a href="#" id="demoBtn1" class="run"> <img src="img/three-video2.png"> <span class="over-text" style="float:leftwidth:90%">案例视频影视官网2.0</span> </a><!--d出视频的代码--> <div id="demo1" class="gpc-t-box"> <div class="gpc-video-t"> <embed allowscriptaccess="always" allownetworking="all" allowfullscreen="true" width="670" height="377" type="application/x-shockwave-flash" src="http://cloud.video.taobao.com/play/u/2182797685/p/1/e/1/t/7/38483233.swf"> </embed> </div> <div class="gpc-video-t1"> <div class="gpc-video-t1-lf"> <h2 class="gpc-video-t1-lf-1">案例视频影视官网</h2><span class="gpc-video-t1-lf-2"><img src="img/read.png" />17502</span> </div> <div class="gpc-video-t1-rt"> <span>¥15,000</span>起 </div> </div> <div class="gpc-video-t2"> <div class="gpc-video-t2-lf"> <p class="gpc-a1-8"><a href="#">来来</a> <a href="#">发布于</a> <a href="#">2016-06-09</a><a href="#">时长:00:20:00</a></p> </div> <div class="gpc-video-t2-rt"> <a class="gpc-a1-9" href="detail.php">查看更多详情>></a> </div> </div> </div> <!--/end-->
首先根据需求我们需要一个按钮,一个d出窗口层;\x0d\x0aOK,废话不多说;\x0d\x0a按钮就用一个基本的:\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分:\x0d\x0a首先需要引入一个JS库,版本自己定义:\x0d\x0a然后给按钮添加相应的点击事件,让点击button的时候,显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a}) 回答于 2022-11-16欢迎分享,转载请注明来源:内存溢出
评论列表(0条)