经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
html5实现点击弹出图片功能
来源:jb51  时间:2021/7/19 9:05:17  对本文有异议

下面给大家分享html5点击弹出图片,分为前台代码和js代码,具体内容如下所示:

前台代码:

  1. <a href="javascript:;" onclick="repeat()">
  2. <div id="modal_volume" style="position: fixed; text-align: center; width: 100%; height: 100%; top: 0; z-index: 9999; display: none;">
  3. <table style="width: 100%; height: 100%;">
  4. <tr>
  5. <td align="center" style="">
  6. <div style="width: 900px; position: relative">
  7. <a href="zjb_enroll?course=专业课提高班">
  8. <img src="Content/images/tanchuang.jpg" /></a>
  9. <a href="javascript:$('#modal_volume').fadeOut();" style="display: block; width: 45px; height: 45px; position: absolute; right: 11px; top: 10px; z-index: 2"></a>
  10. </div>
  11. </td>
  12. </tr>
  13. </table>
  14. </div>

js代码

  1. <script>
  2. function repeat() {
  3. $('#modal_volume').fadeIn();
  4. }
  5. </script>

到此这篇关于html5实现点击弹出图片功能的文章就介绍到这了,更多相关html5点击弹出图片内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号