CSS3/jQuery自定义弹出窗口

最新推荐文章于 2023-03-05 00:29:20 发布

younger_z

最新推荐文章于 2023-03-05 00:29:20 发布

阅读量1.1k

点赞数

分类专栏：网页开发

网页开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

简单演示一下，精简了演示效果和css样式文件，更利于在项目中的实际应用

引入style.css index.js

[html]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <title>index.html</title>  
       
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="this is my page">  
     <meta http-equiv="content-type" content="text/html; charset=gbk">  
     <link href="style.css" rel="stylesheet" type="text/css"/>  
   </head>  
   <body>  
   <div class="md-modal md-effect-1" id="modal-1">  
         <div class="md-content">  
             <h3>  
                 CSS3/jQuery自定义弹出窗口 多种弹出动画  
             </h3>  
             <div>  
                 <ul>  
                     <li>  
                         这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了.  
                     </li>  
                     <li>  
                         弹出窗口中可以自定义html，十分灵活.  
                     </li>  
                     <li>  
                         另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的.  
                     </li>  
                 </ul>  
                 <button class="md-close">  
                     关闭!  
                 </button>  
             </div>  
         </div>  
   </div>  
   <div class="md-modal md-effect-2" id="modal-2">  
         <div class="md-content">  
             <h3>  
                 CSS3/jQuery自定义弹出窗口 多种弹出动画  
             </h3>  
             <div>  
                 <ul>  
                     <li>  
                         这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了.  
                     </li>  
                     <li>  
                         弹出窗口中可以自定义html，十分灵活.  
                     </li>  
                     <li>  
                         另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的.  
                     </li>  
                 </ul>  
                 <button class="md-close">  
                     关闭!  
                 </button>  
             </div>  
         </div>  
   </div>  
   <div class="md-modal md-effect-3" id="modal-3">  
         <div class="md-content">  
             <h3>  
                 CSS3/jQuery自定义弹出窗口 多种弹出动画  
             </h3>  
             <div>  
                 <ul>  
                     <li>  
                         这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了.  
                     </li>  
                     <li>  
                         弹出窗口中可以自定义html，十分灵活.  
                     </li>  
                     <li>  
                         另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的.  
                     </li>  
                 </ul>  
                 <button class="md-close">  
                     关闭!  
                 </button>  
             </div>  
         </div>  
   </div>  
   <div class="container">  
   <button class="md-trigger" data-modal="modal-1">淡入</button>  
   <button class="md-trigger" data-modal="modal-2">从右滑动</button>  
   <button class="md-trigger" data-modal="modal-3">报纸</button>  
   </div>  
   </br>  
   </br>  
   </br>  
   <div>全部效果演示请参考：<a target="_blank" href="http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html">  
       http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html</a>  </div>  
   </body>  
   <script src="index.js" type="text/javascript"></script>  
 </html>  

然后将style.css、index.js和index.html放在同一路径下用chrome或Firefox打开index.html即可

不支持IE浏览器

style.css index.js下载地址：http://download.csdn.net/detail/itmyhome/7433847

参考：http://www.html5tricks.com/category/jquery-plugin

全部效果演示：http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html

younger_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3/jQuery自定义弹出窗口

简单演示一下，精简了演示效果和css样式文件，更利于在项目中的实际应用引入style.css index.js[html] view plaincopy> html> head> title>index.htmltitle> meta http-equiv="keywor
复制链接

扫一扫

专栏目录