python测试开发django-123.bootstrap模态框(modal)垂直居中显示
时间:2021-09-10
本文章向大家介绍python测试开发django-123.bootstrap模态框(modal)垂直居中显示,主要包括python测试开发django-123.bootstrap模态框(modal)垂直居中显示使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
bootstrap 模态框默认会在屏幕顶端显示,跟我们的操作习惯不太符合,我们期望显示到屏幕垂直居中的位置。
在最新的 bootstrap4 版本中可以在<div class="modal-dialog">
上加一个 modal-dialog-centered
属性,来垂直居中显示。
但是大部分用的是bootstrap3 版本,需要自己写javascript脚本来调整位置。
bootstrap3 版本
bootstrap模态框默认会在屏幕顶端显示,位置太靠上了。
bootstrap3 版本,需要自己写 javascript 脚本来调整位置。
- show.bs.modal 在调用 show 方法后触发。
- shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
- hide.bs.modal 当调用 hide 实例方法时触发。
- hidden.bs.modal 当模态框完全对用户隐藏时触发。
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
$('#myModal').on('show.bs.modal', function (e) {
var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;
$(this).find('.modal-dialog').css({
'margin-top': modalHeight
});
});
</script>
实现效果
如果想显示在屏幕正中间往上一点的位置,可以通过modalHeight的值控制,比如正中间往上100个像素
var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2 - 100;
bootstrap4 版本
bootstrap4 版本可以在<div class="modal-dialog">
上加一个 modal-dialog-centered
属性,来垂直居中显示。
原文地址:https://www.cnblogs.com/yoyoketang/p/15250413.html
- autoload自动加载机制使用
- EF 约定介绍
- 关于EF Code First模式不同建模方式对建表产生的影响
- C# 命名空间和程序集
- C# new关键字和对象类型转换(双括号、is操作符、as操作符)
- 防止小程序多次点击跳转解决方案
- 详述 SQL 中的 distinct 和 row_number() over() 的区别及用法
- Web API系列之三 基本功能实现
- 微信小程序的省市选择组件 citySelector分享
- 详述 Java 语言中的 String、StringBuffer 和 StringBuilder 的使用方法及区别
- Class与Style绑定
- 机器学习并不难
- android的RadioGroup讲解
- asp.net MVC 应用程序的生命周期
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP入门之函数
- spring boot 启动报错 org/springframework/core/ErrorCoded
- PHP入门之数组
- PHP基础之排序
- 关于mysql limit offset的一点优化
- PHP基础之查找
- PHP木马免杀的一些总结
- PHP基础之面向对象篇
- PHP变量覆盖漏洞小结
- 算法复习 : 插入排序原理,记忆,时间复杂度 (7行java实现)
- PHP代码审计01之in_array()函数缺陷
- 分治思想 : 并归排序与其时间复杂度
- java Spring系列之 配置文件的操作 +Bean的生命周期+不同数据类型的注入简析+注入的原理详解+配置文件中不同标签体的使用方式
- 算法系列1 初识算法 算法复杂性模型 算法复杂度的计算
- 树莓派基础实验32:DS1302实时时钟模块实验