jQuery-Tools-overlay 使用介绍

程序员文章站 2022-03-03 22:46:13

代码如下: 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/46771.html"> 学vuejs看什么书 </a> </p> <p> 下一篇： <a href="/article/46773.html"> Ubuntu 20.04.2 发布，包括中国版的优麒麟 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2314901.html" target="_blank" title="PHP SplObjectStorage使用实例"> <h2> PHP SplObjectStorage使用实例 </h2> </a> </li> <li> <a href="/article/2314891.html" target="_blank" title="网页客户端使用php访问mysql数据时出现NetworkError: 500 Intern"> <h2> 网页客户端使用php访问mysql数据时出现NetworkError: 500 Intern </h2> </a> </li> <li> <a href="/article/2314893.html" target="_blank" title="jquery 之 Deferred 使用与实现"> <h2> jquery 之 Deferred 使用与实现 </h2> </a> </li> <li> <a href="/article/2314875.html" target="_blank" title="pc端使用rem布局"> <h2> pc端使用rem布局 </h2> </a> </li> <li> <a href="/article/2314822.html" target="_blank" title="MySQL使用临时表加速查询的方法"> <h2> MySQL使用临时表加速查询的方法 </h2> </a> </li> <li> <a href="/article/2314854.html" target="_blank" title="node.js中socket.io学习教程介绍（三）"> <h2> node.js中socket.io学习教程介绍（三） </h2> </a> </li> <li> <a href="/article/2314797.html" target="_blank" title="使用PHP编写发红包程序，php编写红包程序_PHP教程"> <h2> 使用PHP编写发红包程序，php编写红包程序_PHP教程 </h2> </a> </li> <li> <a href="/article/2314806.html" target="_blank" title="php使用gettimeofday函数返回当前时间并存放在关联数组里，php数组函数_PHP教程"> <h2> php使用gettimeofday函数返回当前时间并存放在关联数组里，php数组函数_PHP教程 </h2> </a> </li> <li> <a href="/article/2314765.html" target="_blank" title="鸿蒙系统中智能充电模式和反向充电功能怎么使用?"> <h2> 鸿蒙系统中智能充电模式和反向充电功能怎么使用? </h2> </a> </li> <li> <a href="/article/2314769.html" target="_blank" title="分享盘点10个可免费使用的网站CDN加速服务"> <h2> 分享盘点10个可免费使用的网站CDN加速服务 </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>