bootstrap+jquery快捷方式选项卡搜索添加弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:bootstrap+jquery快捷方式选项卡搜索添加弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> ul li{list-style: none;} /*模态框*/ .modal{overflow: hidden;} .modal .modal-dialog{position: fixed; top: 46%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) !important; max-width: 800px; width: 800px;} .modal .modal-dialog .modal-body{width: 797px; max-height: 400px; min-height: 400px; overflow-x: hidden; overflow-y: auto; padding: 0 20px;} .modal .modal-small{max-width: 800px; width: 600px;} .new-manger .show-box{border: 1px solid #dddddd; height: 150px;} .new-manger .show-box{border: 1px solid #dddddd;height: 150px;width: 200px;} .pageWrap .model-page{margin-top: 0;} /*快捷方式*/ .shortcut-box>li{ height: 70px !important; color: rgba(255,255,255,0.8); border: none !important; text-align: center; box-sizing: border-box; padding: 5px;} .shortcut-box>li>div{display:inline-block; width:100%; height: 100%; border-radius: 5px; text-align: center; cursor: pointer;} .shortcut-box>li:nth-child(1)>div{background:#82D5FF;} .shortcut-box>li:nth-child(2)>div{background:#C0E774;} .shortcut-box>li:nth-child(3)>div{background:#E96C96;} .shortcut-box>li:nth-child(4)>div{background:#fe8103;} .shortcut-box>li:nth-child(5)>div{background:#f7d418;} .shortcut-box>li:nth-child(6)>div{background:#59d6ac;} .shortcut-box>li:nth-child(7)>div{background:#8290db;} .shortcut-box>li:nth-child(8)>div{background:#f36c62;} .shortcut-box>li:nth-child(9)>div{background:#CCAAD7;} .shortcut-box>li:last-child>div{background:#45b6c8;} .shortcut-box>li>div>i{font-size: 1.5em; text-align: center; margin-top: 10px; display: inline-block;} .shortcut-box>li>div>p{padding: 0 !important; line-height: 2;} /*快捷方式弹窗*/ .modal .shortcut-add-box{padding: 10px 20px !important;} .modal .modal-header .shortcut-modal-title{display: inline-block; float: left;} .modal .modal-header .shortcut-search-form{display: inline-block; float: left; margin-left: 10px; margin-bottom: -10px;} .modal .modal-header .shortcut-search-form>form{display: inline-block; height: 33px; width: auto; position: relative; bottom: 5px;} .modal .modal-header .shortcut-search-form>form>i{position:absolute; left: 0; top: 7px; color:#ccc; font-size: 15px; margin-left: 10px; color: #1AB394;} .modal .modal-header .shortcut-search-form>form>input[type='search']{position:relative; height: 100%; border: 1px solid #ccc; border-radius: 25px; outline: none; background: none; width: 30px; top:0; left:0; padding-left: 30px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .modal .modal-header .shortcut-search-form>form>input[type='search']:focus{border: 1px solid #1ab394; width: 220px; -webkit-box-shadow: 0 0 5px rgba(26,179,148,.5); -moz-box-shadow: 0 0 5px rgba(26,179,148,.5); box-shadow: 0 0 5px rgba(26,179,148,.5);} /*快捷方式弹窗主体*/ .modal .modal-body .shortcut-add-box-left{width: 120px; height: 100%; position: fixed; z-index: 3000;} .modal .modal-body .shortcut-add-box-left ul{margin: 0; padding: 0; position: relative; top: 0; left: 0;} .modal .modal-body .shortcut-add-box-left ul li{width: 100%; list-style: none; height: 34px; padding-left: 20px; line-height: 34px; border: none; cursor:pointer;} .modal .modal-body .shortcut-add-box-left ul li.active,.modal .modal-body .shortcut-add-box-left ul li:hover{color: #1AB394;} .modal .modal-body .shortcut-add-box-left ul li>i{margin-right: 6px;} .lanPos{width: 100%; height: 34px; line-height: 34px; background: #F8F8F8; border-left: 3px solid #1AB394; position: absolute; left: 0; top: 0; z-index: -1; transition: top .2s;} .modal .modal-body .shortcut-add-box-right{position: inherit; padding: 10px 15px; margin: 0 0 0 120px;} .modal .modal-body .shortcut-add-box-right h5{border-bottom: 1px solid #e7eaec;} .modal .modal-body .shortcut-add-box-right h5>span{display: inline-block; font-size: 15px; border-bottom: 2px solid #1AB394; padding-bottom: 10px;} .modal .modal-body .shortcut-add-box-right ul{padding: 0; margin: 0; } .modal .modal-body .shortcut-add-box-right ul li{list-style: none; float: left; padding: 10px 15px; border: 1px solid #ddd; color: #a7a7a7; margin: 0 15px 15px 0; cursor: pointer;} .modal .modal-body .shortcut-add-box-right ul li.shortcut-selected{border: 1px solid #1AB394; color: #1AB394;} .modal .modal-body .shortcut-add-box-right ul li>i{margin-right: 5px;} </style> </head> <body> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="margin: 100px auto;"> <div class="ibox float-e-margins"> <div class="ibox-content"> <ul class="shortcut-box clearfix"> <li class="col-xs-4 col-sm-4 col-md-3 col-lg-3" data-toggle="modal" data-target="#myModal"> <div> <i class="fa fa-plus-circle"></i> <p>添加快捷</p> </div> </li> </ul> </div> </div> </div> </div> <!--添加快捷方式模态框开始--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header clearfix mid"> <button type="button" class="close mid" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title shortcut-modal-title mid" id="myModalLabel">添加快捷方式</h4> <div class="shortcut-search-form mid"> <form action=""> <i class="fa fa-search"></i> <input type="search" placeholder="请输入要查询的组件..."> </form> </div> </div> <div class="modal-body shortcut-add-box"> <div class="shortcut-add-box-left"> <ul> <li class="active" id="li1"> <i class="fa fa-bars"></i> <span>全部</span> </li> <li> <i class="fa fa-car"></i> <span>快捷一</span> </li> <li> <i class="fa fa-users"></i> <span>快捷二</span> </li> <li> <i class="fa fa-briefcase"></i> <span>快捷三</span> </li> <li> <i class="fa fa-user-plus"></i> <span>快捷四</span> </li> <li> <i class="fa fa-file-text"></i> <span>快捷五</span> </li> <li> <i class="fa fa-wrench"></i> <span>快捷六</span> </li> <li> <i class="fa fa-pencil-square"></i> <span>快捷七</span> </li> <li> <i class="fa fa-building"></i> <span>快捷八</span> </li> <li> <i class="fa fa-bar-chart"></i> <span>快捷九</span> </li> <li> <i class="fa fa-cog"></i> <span>快捷十</span> </li> <div class="lanPos"></div> </ul> </div> <div class="shortcut-add-box-right"> <div class="car-info-shortcut shortcut-element-list"> <h5><span>快捷一</span></h5> <ul class="shortcut-element-box clearfix"> <li> <i class="fa fa-car"></i> <span>快捷方式1</span> </li> </ul> </div> <div class="person-shortcut shortcut-element-list"> <h5><span>快捷二</span></h5> <ul class="shortcut-element-box clearfix"> <li> <i class="fa fa-user-times"></i> <span>快捷方式2</span> </li> </ul> </div> <div class="enterprise-info-shortcut shortcut-element-list"> <h5><span>快捷三</span></h5> <ul class="shortcut-element-box clearfix"> <li> <i class="fa fa-male"></i> <span>快捷方式3</span> </li> <li> <i class="fa fa-hand-pointer-o"></i> <span>快捷方式4</span> </li> </ul> </div> <div class="enterprise-server-shortcut shortcut-element-list"> <h5><span>快捷四</span></h5> <ul class="shortcut-element-box clearfix"> <li> <i class="fa fa-user-plus"></i> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0