bootstrap演示20种不同的手机响应式弹出层modal特效资源-CSDN文库

共22个文件

js：6个

css：6个

url：2个

bootstrap

2星需积分: 49 125 浏览量 2018-01-15 09:27:15 上传评论收藏 84KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap演示20种不同的手机响应式弹出层modal特效.zip （22个子文件）

index.html 49KB

jQuery经典插件大全-实例-教程-参数详解.url 127B

在线手册-参考手册-离线手册-手册网.url 120B

legacy.min.js 8KB

legacy.js 27KB

custombox.min.js 13KB

custombox.js 31KB

demo.js 2KB

demo

images

og.png 24KB

xhr

ajax.html 992B

demo.js 2KB

css

demo.css 2KB

fonts

icomoon.woff 5KB

icomoon.ttf 5KB

icomoon.svg 10KB

icomoon.eot 5KB

css

default.css 5KB

custombox.min.css 17KB

demo.css 3KB

normalize.css 2KB

custombox.css 177KB

svg

blur.svg 126B

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>bootstrap演示20种不同的手机响应式弹出层modal特效</title> <link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css"/> <link rel="stylesheet" href="css/demo.css"/> <link rel="stylesheet" href="css/custombox.min.css"/>  </head> <body> <div class="sucaihuo-container"> <div class="container mt30"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"> <div class="panel panel-success"> <div class="panel-heading">Effects</div> <div class="list-group"> <a class="list-group-item" href="#modal"> Fadein </a> <a class="list-group-item" href="#modal"> Slide <span class="label label-default pull-right">custom animation</span> </a> <a class="list-group-item" href="#modal">Newspaper</a> <a class="list-group-item" href="#modal">Fall</a> <a class="list-group-item" href="#modal">Sidefall</a> <a class="list-group-item" href="#modal" data-toggle="tooltip" data-placement="top" title="Required file."> Blur <span class="label label-warning pull-right">updated</span> </a> <a class="list-group-item" href="#modal"> Flip <span class="label label-default pull-right">custom animation</span> </a> <a class="list-group-item" href="#modal">Sign</a> <a class="list-group-item" href="#modal">Superscaled</a> <a class="list-group-item" href="#modal">Slit</a> <a class="list-group-item" href="#modal"> Rotate <span class="label label-default pull-right">custom animation</span> </a> <a class="list-group-item" href="#modal"> Letmein <span class="label label-warning pull-right">updated</span> </a> <a class="list-group-item" href="#modal"> Makeway <span class="label label-warning pull-right">updated</span> </a> <a class="list-group-item" href="#modal"> Slip <span class="label label-warning pull-right">updated</span> </a> <a class="list-group-item" href="#modal"> Corner <span class="label label-success pull-right">new</span> </a> <a class="list-group-item" href="#modal"> Slide together <span class="label label-success pull-right">new</span> </a> <a class="list-group-item" href="#modal"> Scale <span class="label label-success pull-right">new</span> </a> <a class="list-group-item" href="#modal"> Door <span class="label label-success pull-right">new</span> </a> <a class="list-group-item" href="#modal"> Push <span class="label label-success pull-right">new</span> </a> <a class="list-group-item" href="#modal"> Content scale <span class="label label-success pull-right">new</span> </a> </div> </div> </div> <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 demo-content"> <div class="bs-callout bs-callout-info bs-callout-support"> <h4> <span class="glyphicon glyphicon-bullhorn"></span> 关于该模态窗口插件: </h4> <p>这个模态窗口插件使用原生javascript制作，它也可以和jQuery完美的结合。</p> <p>请注意：这些模态窗口动画仅仅工作在支持各自CSS3属性的浏览器上。Internet Explorer 8 和 9需要legacy.min.js的支持，但是没有动画效果。</p> <p><strong>点击右边的列表查看效果</strong></p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAdCAYAAAAtm2eGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzQzODFFRTIxRjgxMUUzOTIyNkFEM0JDMjg5MkU0NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzQzODFFRjIxRjgxMUUzOTIyNkFEM0JDMjg5MkU0NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NDM4MUVDMjFGODExRTM5MjI2QUQzQkMyODkyRTQ2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NDM4MUVEMjFGODExRTM5MjI2QUQzQkMyODkyRTQ2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+krNC9gAALBhJREFUeNrUfAeYHNWV9anUuXt6ZnqiJiiMchglBJIASSBEFiBhMMkYg5ckY7DXsrF3TbDBNsZEY9Y2i02OwiZIIggFhAIKKAtpcs4znburK73/vuoZJIHktb3sv9/2fKWa6e6qevXeeeeec98tCYwxDL3WzBr/+e/83cqkAK/DAfhdkLxOiG7aXI7snjZBFLJftPcWLFWnTYOVztCmwaS9mdaBlAamZaAlDBgxAYJEXzcZJJ+EkfeW2Hv+99Ev/p1+iLj6XhHvdoWAoAnJcsK0ZEi5IVgDKoJTKuEpL0L7+gZIOsMl916IxJSR2PnsFqi7D0FN0zWcpXScievT/4lvhNdixrIi4OsTAd0C+DU9BlhdDsw/TrB/P6YNXj9EjwdwKEBREQSHM9szkgwY9F1DF+BwyvbNM8ukf8EyWvazjAqWjIPV1tJ1TDqZcMy56faQoO0up8PeS0PXpB+n0wkmMOiaTofZf/OPZ3Z2dhYbhpGKRCJ1+fn5jZdcfAlGVY3CmjVr0NPTi+GVw5FOp7F/3z7s2bMH/oAf9F309/fb5/niS7BojFxFiIz5jn0Lx3tZpoVASQg5JXl0WwZyioKIdfSjt1eFa/x0zBglY/nJB7BwzPbsGEbDsPQUQOMtpPto7BnMgTT0gRQ0zW33Q/CK9Z+fX8b/pZfAO82CGUk6YAijBKcyxuN3hQrGFTtzTAh5XiURZ0

评论收藏

内容反馈