jQuery-Tools-overlay 使用介绍

程序员文章站 2022-06-26 10:20:47

代码如下: jquery tools standalone demo<...</div> <div class="content"> <p>代码如下:</p> <p class="codebody" id="code93412"><!doctype html><br> <html><br> <head><br> <title>jquery tools standalone demo</title><br> <br> <script src="https://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script><br> <br> <link rel="stylesheet" type="text/css"<br> href="./overlay-basic.css"/><br> <style><br> /* some styling for triggers */<br> #triggers {<br> text-align:center;<br> }<br> #triggers img {<br> cursor:pointer;<br> margin:0 5px;<br> background-color:#fff;<br> border:1px solid #ccc;<br> padding:2px;<br> -moz-border-radius:4px;<br> -webkit-border-radius:4px;<br> }<br> /* styling for elements inside overlay */<br> .details {<br> position:absolute;<br> top:15px;<br> right:15px;<br> font-size:11px;<br> color:#fff;<br> width:150px;<br> }<br> .details h3 {<br> color:#aba;<br> font-size:15px;<br> }<br> </style><br> </head><br> <body><br> <p id="triggers"><br> <img src=https://www.2cto.com/uploadfile/2018/0605/20180605114001685.jpg" rel="#mies1"/><br> <img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002839.jpg" rel="#mies2"/><br> </p><br> <br> <p class="simple_overlay" id="mies1"><br> <img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002206.jpg" /><br> <p class="details"><br> <h3>the barcelona pavilion</h3><br> <h4>barcelona, spain</h4><br> <p><br> the barcelona pavilion, designed by ludwig mies van der rohe,<br> was the german pavilion for the 1929 international exposition in<br> barcelona, spain. it was an important building in the history of<br> modern architecture.<br> </p><br> <p><br> several critics, historians and modernists have declared it "the<br> most beautiful building of the century"<br> </p><br> </p><br> </p><br> <p class="simple_overlay" id="mies2"><br> <img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002522.jpg" /><br> <p class="details"><br> <h3>the barcelona pavilion</h3><br> <h4>barcelona, spain</h4><br> <p><br> another unique feature of this building is the <em>exotic<br> materials mies chose to use</em>.<br> </p><br> <p><br> plates of high-grade stone materials like veneers of tinos verde<br> antico marble and golden onyx as well as tinted glass of grey,<br> green, white, in addition to translucent glass, perform<br> exclusively as spatial piders.<br> </p><br> </p><br> </p><br> <script><br> $(document).ready(function() {<br> $("img[rel]").overlay({<br> closeonclick:false,<br> mask: 'darkred'<br> });<br> });<br> </script><br> </body><br> </html></p> <br><a href="https://www.2cto.com/kf/qianduan/css/" target="_blank" class="keylink" rel="nofollow">css</a><br><p class="codetitle"><span onclick="docopy('code85126')" style="cursor: pointer"><u>.</u></span> 代码如下:</p> <p class="codebody" id="code85126"><br> /* the overlayed element */<br> .simple_overlay {<br> /* must be initially hidden */<br> display:none;<br> /* place overlay on top of other elements */<br> z-index:10000;<br> /* styling */<br> background-color:#333;<br> width:675px;<br> min-height:200px;<br> border:1px solid #666;<br> /* css3 styling for latest browsers */<br> -moz-box-shadow:0 0 90px 5px #000;<br> -webkit-box-shadow: 0 0 90px #000;<br> }<br> /* close button positioned on upper right corner */<br> .simple_overlay .close {<br> background-image:url(./close.png);<br> position:absolute;<br> right:-15px;<br> top:-15px;<br> cursor:pointer;<br> height:35px;<br> width:35px;<br> }</p> <br> 关闭的css的命名： xxx .close。<br> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1538549.html"> leaflet加载各类图层实时操作演示 </a> </p> <p> 下一篇： <a href="/article/1538551.html"> Codeforces Round #564 (Div. 2) D - Nauuo and Circle（树上排列） </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2153437.html" target="_blank" title="maya怎么使用角色组命令制作动画?"> <h2> maya怎么使用角色组命令制作动画? </h2> </a> </li> <li> <a href="/article/2153444.html" target="_blank" title="百度浏览器怎么清除缓存提升使用速度"> <h2> 百度浏览器怎么清除缓存提升使用速度 </h2> </a> </li> <li> <a href="/article/2153440.html" target="_blank" title="猎豹浏览器怎么下载视频文件？使用猎豹浏览器下载网页视频方法图解"> <h2> 猎豹浏览器怎么下载视频文件？使用猎豹浏览器下载网页视频方法图解 </h2> </a> </li> <li> <a href="/article/2153447.html" target="_blank" title="PS CC 2018怎么启用绘画对称功能? ps2018对称的使用方法"> <h2> PS CC 2018怎么启用绘画对称功能? ps2018对称的使用方法 </h2> </a> </li> <li> <a href="/article/2153420.html" target="_blank" title="MAYA怎么使用UV拆分对人物进行拆分?"> <h2> MAYA怎么使用UV拆分对人物进行拆分? </h2> </a> </li> <li> <a href="/article/2153334.html" target="_blank" title="谷歌浏览器怎么屏蔽广告？谷歌浏览器广告屏蔽插件使用方法图解"> <h2> 谷歌浏览器怎么屏蔽广告？谷歌浏览器广告屏蔽插件使用方法图解 </h2> </a> </li> <li> <a href="/article/2153339.html" target="_blank" title="谷歌浏览器怎么翻译网页？谷歌浏览器网页翻译功能使用方法介绍"> <h2> 谷歌浏览器怎么翻译网页？谷歌浏览器网页翻译功能使用方法介绍 </h2> </a> </li> <li> <a href="/article/2153380.html" target="_blank" title="使用Color bf 命令更改命令行窗体背景字体颜色"> <h2> 使用Color bf 命令更改命令行窗体背景字体颜色 </h2> </a> </li> <li> <a href="/article/2153355.html" target="_blank" title="如何正确使用SSD提升电脑的速度和性能"> <h2> 如何正确使用SSD提升电脑的速度和性能 </h2> </a> </li> <li> <a href="/article/2153363.html" target="_blank" title="3DSMAX中充和填充孔洞工具怎么使用?"> <h2> 3DSMAX中充和填充孔洞工具怎么使用? </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>