CSS3 jQuery自定义弹出窗口

  • N3_644813
    了解作者
  • 69.8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-24 06:34
    上传日期
CSS3 jQuery自定义弹出窗口
CSS3 jQuery自定义弹出窗口.zip
  • CSS3 jQuery自定义弹出窗口
  • 博客项目演示
  • index.html
    2.6KB
  • index.js
    195.6KB
  • style.css
    3.2KB
  • jquery-css3-modal-window.rar
    35KB
内容介绍
<!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" rel='nofollow' onclick='return false;'> http://www.html5tricks.com/demo/jquery-css3-modal-window/index.html</a> </div> </body> <script src="index.js" type="text/javascript"></script> </html>
评论
    相关推荐