bootstrap+jquery快捷方式选项卡搜索添加弹出层效果代码-html代码-BFW代码库

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 .........完整代码请登录后点击上方下载按钮下载查看