html js css bootstrap 小上三角 和 小下三角
来源：互联网 发布：手机探鱼软件 编辑：程序博客网 时间：2024/06/03 22:44
这种小 三角 我也不知道怎么说。
先上个图 看看效果
下面 是html 代码
css 才是最主要的
js 只是 决定 这个 modal 显示的位置。
<!DOCTYPE html><html><head><title>gadf</title><link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"><script src="jquery-3.2.1.min.js" type="text/javascript"></script><script src="dist/js/bootstrap.min.js" type="text/javascript"></script><style type="text/css">.zijisanjiclass{ width: 220px;border: 1px solid rgba(0,0,0,.15);background-color: #fff;padding: 10px;top :0px;position: absolute;}.datepicker-select-dropdown.datepicker-select-orient-top:before { bottom: -7px; left: 6px; border-bottom: 0; border-top: 7px solid rgba(0,0,0,.15);}.datepicker-select-dropdown:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0,0,0,.15); border-bottom-color: rgba(0,0,0,.2);}.datepicker-select-dropdown:after, .datepicker-select-dropdown:before { content: ''; display: inline-block; border-top: 0; position: absolute;}.datepicker-select-dropdown.datepicker-select-orient-top:after { bottom: -6px; left: 7px; border-bottom: 0; border-top: 6px solid #fff;}.datepicker-select-dropdown:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff;}.datepicker-select-dropdown.datepicker-select-orient-bottom:after { top: -6px;}.datepicker-select-dropdown.datepicker-select-orient-bottom:before { top: -7px;}.form .form-bordered .form-group>div { border-left: 1px solid #efefef;}.form .form-bordered .form-group { margin: 0; border-bottom: 1px solid #efefef;}</style></head><body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"> <div class="page-wrapper"> <c:import url="../header.jsp"></c:import> <div class="clearfix"> </div> <div class="page-container"> <div class="page-sidebar-wrapper"> <div class="page-sidebar navbar-collapse collapse"> <c:import url="../menu.jsp"></c:import> </div> </div> <div class="page-content-wrapper" > <!-- BEGIN CONTENT BODY --> <div class="page-content" id="mainBodyId"> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a href="index.html">首页</a> <i class="fa fa-circle"></i> </li> </ul> </div> <div class="row"> <div class="col-md-12"> <div class="portlet light portlet-fit portlet-datatable bordered"> <div class="portlet-body"> <div class="table-container"> <table class="table table-striped table-bordered table-hover table-checkable" id="datatable_ajax_user_info"> <thead> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="filter"> <td> <input type="text" class="form-control form-filter input-sm" name="userInfoId"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userName"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userAge"> </td> <td> <select class="form-control form-filter" style="height: 30px;padding: 4px 12px;"> <option value="男">男</option> <option value="女">女</option> <option value="其他">其他</option> </select> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userBirthday" id="userBirthdayid"> </td> <td><input type="text" class="form-control form-filter input-sm" name="userNations"></td> <td> <input type="text" class="form-control form-filter input-sm" name="userHight"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userWeight"> </td> <td> <select class="form-control form-filter" style="height: 30px;padding: 4px 12px;"> <option value="博士">博士</option> <option value="硕士">硕士</option> <option value="本科">本科</option> <option value="专科">专科</option> <option value="高中">高中</option> <option value="中专">中专</option> <option value="初中">初中</option> <option value="小学">小学</option> </select> </td> <td> <div class="margin-bottom-5"> <button class="btn btn-sm green btn-outline filter-submit margin-bottom"> <i class="fa fa-search"></i> Search</button> <button class="btn btn-sm red btn-outline filter-cancel"> <i class="fa fa-times"></i> Reset</button> </div> </td> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> <c:import url="../bottom.jsp"></c:import> </div> <div id="zijixiede" class="zijisanjiclass datepicker-select-dropdown datepicker-select-orient-left"> <div class="form" style="border: 1px solid #e7ecf1!important;"> <form class="form-horizontal form-bordered"> <div class="form-group"> <label class="control-label col-md-3">年</label> <div class="col-md-9"> <select class="form-control form-filter"> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-md-3">月</label> <div class="col-md-9"> <select class="form-control form-filter"> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-md-3">日</label> <div class="col-md-9"> <select class="form-control form-filter"> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> </select> </div> </div> <div class="form-group"> <div class="col-md-11"> <div class="btn btn-default quedingbtn" >确定</div> </div> </div> </form> </div> </div> <div class="quick-nav-overlay"></div> <script>jQuery(document).ready(function(){$("#userBirthdayid").focus(function(){ //var offset = this.component ? this.component.parent().offset() : this.element.offset();var offset = $(this).offset();console.info(offset);var paddingTop = $("#zijixiede").css('padding-top');console.info(paddingTop);var height = $(this).outerHeight(false);console.info(height);var width = $(this).outerWidth(false);console.info(width);var scrollTop = $(document).scrollTop();console.info(scrollTop);var outerHeight = $("#zijixiede").outerHeight();console.info(outerHeight);var top_overflow = -scrollTop + offset.top - outerHeight;console.info(top_overflow);var yorient = top_overflow < 0 ? 'bottom' : 'top';$("#zijixiede").addClass('datepicker-select-orient-' + yorient);var top = offset.top;if (yorient === 'top')top -= outerHeight + parseInt(paddingTop);elsetop += height;var left = offset.left;console.info(left);$("#zijixiede").css({ top: top,left: left});$("#zijixiede").show();});$(document).mousedown(function(e){if(!($("#zijixiede").find(e.target).length)&&!($("#userBirthdayid").is(e.target)))$("#zijixiede").hide();});$(".quedingbtn").click(function(){ console.info("拉克建档立卡京东方拉克");//return false;});});</script></body></html>阅读全文
0 0
- html js css bootstrap 小上三角 和 小下三角
- css小三角
- CSS 小三角
- css小三角
- css去掉select边框和小三角
- css去掉select边框和小三角
- css+div 列表小三角
- 纯css实现小三角
- 纯CSS实现小三角
- 纯css实现小三角
- 纯CSS小三角制作
- css盒子模型+小三角
- 小三角
- css+div 小三角tip小提示
- css3制作小三角和镂空样式的小三角
- 纯CSS实现提示框小三角
- CSS无图片实现小三角
- DIV+CSS实现的小三角
- Mybatis Generator最完整配置详解
- 北京做Java开发月薪两万，so easy！
- python安装虚拟环境
- OpenStack 最小化安装配置(一)：物理机网桥配置
- 通过 Powershell 来替换 ARM 模式下虚拟机的网络接口
- html js css bootstrap 小上三角 和 小下三角
- webstorm 2017 激活破解
- Python 线程和 redis 简单读写操作应用
- 全面解析所有的工厂模式！
- 使用CSS里的user-select属性控制用户在页面上选中的内容
- 多条目加载
- eclipse debug processWorkerExit(w, completedAbruptly)
- java8函数式接口和Lambda表达式应用在javaFX中tableView自定义点击事件
- 9.18 题解？
