bootstrap弹出框居中

/**
* Vertically center Bootstrap 3 modals so they aren‘t always stuck at the top
*/
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find(‘.modal-dialog‘);
modal.css(‘display‘, ‘block‘);

// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$(‘.modal‘).on(‘show.bs.modal‘, reposition);
// Reposition when the window is resized
$(window).on(‘resize‘, function() {
$(‘.modal:visible‘).each(reposition);
});
});

时间: 2024-08-24 04:18:34

bootstrap弹出框居中的相关文章

Bootstrap 弹出框(Popover)插件

Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstrap Data API来填充. 用法 弹出框插件根据需要生成内容或标记,默认情况下把弹出框(Popover)放在它们触发元素的后面,您可以有两种方法来启动弹出框 1.通过data属性:如需要添加一个弹出框,只需要向锚或按钮添加一个data-toggle="popover"即可.锚的 tit

bootstrap 弹出框点击其他区域时弹出框不消失选项设置

默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可能会带来很不好的体验效果,所以,我们会希望不会发生这种情况,事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果.如下所示: <div class="modal fade" id="myModal" tabindex=&quo

第二百四十六节,Bootstrap弹出框和警告框插件

Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. 基本用法 注意:必须在js结合popover()方法使用 data-toggle="popover"弹出框事件绑定,写在触发弹出框的元素里,执行弹出框事件点击弹出或隐藏(Bootstrap)title=""设置弹出框标题,写在弹出框元素里,(Bootstrap)

Bootstrap弹出框bootboxjs

官网 bootstrap的弹出框 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edg

Bootstrap弹出框

弹出框3要素 modal-headermodal-bodymodal-footer <!--促发弹窗--> <a href="#" data-toggle="modal" data-target="#about">点我弹出</a> <!--弹窗代码--> <div class="modal fade" id="about"> <div cla

Bootstrap 弹出框和警告框插件

一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点击弹出/隐藏弹出框 </button>   <script type=&qu

适配移动端的简单弹出框居中效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #mask_box { 7 width:100%; 8 height:100%; 9 z-index:9999; 10 position:fixed; 11 top:0; 12 left:0; 13 display: none; 14 } 15 #Dia

弹出框居中

为什么会居中?期初我也不明白,但是看到下面的代码我就知道了,这是博主曾经写过一个水平垂直居中的技巧,就是利用空白标签实现这个效果,只不过这里换成了伪类元素.点赞.dialog_container:after {display: inline-block;content: ";width: 0;height: 100%;vertical-align: middle;}

将bootstrap弹出框的点击弹出改为鼠标移入弹出

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery.min.js"></script&g