CSS3/jQuery自定义弹出窗口 ╰+攻爆jí腚メ 2022-08-27 11:50 133阅读 0赞 简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js **\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1] 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"**>** 2. **<****html****>** 3. **<****head****>** 4. **<****title****>**index.html**</****title****>** 5. 6. **<****meta**http-equiv="keywords"content="keyword1,keyword2,keyword3"**>** 7. **<****meta**http-equiv="description"content="this is my page"**>** 8. **<****meta**http-equiv="content-type"content="text/html; charset=gbk"**>** 9. **<****link**href="style.css"rel="stylesheet"type="text/css"**/>** 10. **</****head****>** 11. **<****body****>** 12. **<****div**class="md-modal md-effect-1"id="modal-1"**>** 13. **<****div**class="md-content"**>** 14. **<****h3****>** 15. CSS3/jQuery自定义弹出窗口 多种弹出动画 16. **</****h3****>** 17. **<****div****>** 18. **<****ul****>** 19. **<****li****>** 20. 这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了. 21. **</****li****>** 22. **<****li****>** 23. 弹出窗口中可以自定义html,十分灵活. 24. **</****li****>** 25. **<****li****>** 26. 另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的. 27. **</****li****>** 28. **</****ul****>** 29. **<****button**class="md-close"**>** 30. 关闭! 31. **</****button****>** 32. **</****div****>** 33. **</****div****>** 34. **</****div****>** 35. **<****div**class="md-modal md-effect-2"id="modal-2"**>** 36. **<****div**class="md-content"**>** 37. **<****h3****>** 38. CSS3/jQuery自定义弹出窗口 多种弹出动画 39. **</****h3****>** 40. **<****div****>** 41. **<****ul****>** 42. **<****li****>** 43. 这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了. 44. **</****li****>** 45. **<****li****>** 46. 弹出窗口中可以自定义html,十分灵活. 47. **</****li****>** 48. **<****li****>** 49. 另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的. 50. **</****li****>** 51. **</****ul****>** 52. **<****button**class="md-close"**>** 53. 关闭! 54. **</****button****>** 55. **</****div****>** 56. **</****div****>** 57. **</****div****>** 58. **<****div**class="md-modal md-effect-3"id="modal-3"**>** 59. **<****div**class="md-content"**>** 60. **<****h3****>** 61. CSS3/jQuery自定义弹出窗口 多种弹出动画 62. **</****h3****>** 63. **<****div****>** 64. **<****ul****>** 65. **<****li****>** 66. 这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了. 67. **</****li****>** 68. **<****li****>** 69. 弹出窗口中可以自定义html,十分灵活. 70. **</****li****>** 71. **<****li****>** 72. 另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的. 73. **</****li****>** 74. **</****ul****>** 75. **<****button**class="md-close"**>** 76. 关闭! 77. **</****button****>** 78. **</****div****>** 79. **</****div****>** 80. **</****div****>** 81. **<****div**class="container"**>** 82. **<****button**class="md-trigger"data-modal="modal-1"**>**淡入**</****button****>** 83. **<****button**class="md-trigger"data-modal="modal-2"**>**从右滑动**</****button****>** 84. **<****button**class="md-trigger"data-modal="modal-3"**>**报纸**</****button****>** 85. **</****div****>** 86. **</****br****>** 87. **</****br****>** 88. **</****br****>** 89. **<****div****>**全部效果演示请参考:**<****a**target="\_blank"href="http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html"**>** 90. http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html**</****a****>****</****div****>** 91. **</****body****>** 92. **<****script**src="index.js"type="text/javascript"**>****</****script****>** 93. **</****html****>** 然后将style.css、index.js和index.html放在同一路径下 用chrome或Firefox打开index.html即可 不支持IE浏览器 **style.css index.js下载地址**:[http://download.csdn.net/detail/itmyhome/7433847][http_download.csdn.net_detail_itmyhome_7433847] **参考:**[http://www.html5tricks.com/category/jquery-plugin][http_www.html5tricks.com_category_jquery-plugin] **全部效果演示:**[http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html][http_www.html5tricks.com_demo_jquery-css3-modal-window_index.html] [view plain]: http://blog.csdn.net/itmyhome1990/article/details/27522775# [CODE]: https://code.csdn.net/assets/CODE_ico.png [CODE_CODE]: https://code.csdn.net/snippets/372750 [ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg [ico_fork.svg 1]: https://code.csdn.net/snippets/372750/fork [http_download.csdn.net_detail_itmyhome_7433847]: http://download.csdn.net/detail/itmyhome/7433847 [http_www.html5tricks.com_category_jquery-plugin]: http://www.html5tricks.com/category/jquery-plugin [http_www.html5tricks.com_demo_jquery-css3-modal-window_index.html]: http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html
还没有评论,来说两句吧...