如何将模态置于屏幕中央？

如何将模态置于屏幕中央？这是我的HTML和JS代码它可以在Chrome控制台，但是当我刷新此页面 - 它不工作如何将模态置于屏幕中央？

$('.modal').css('top', $(window).outerHeight()/2 - ($(".modal-dialog").outerHeight())/2 + 'px');

来源

2016-09-21 Vlad Udod

您使用的引导？如果是的话，[检查这个答案]（http://stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window） – Robiseb

试着这么做：

$('.modal').css('margin-top', (Math.floor((window.innerHeight - $('.modal')[0].offsetHeight)/2) + 'px');

来源

2016-09-21 22:47:28 Jim

解决

简单的方法

.center { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

来源

2016-09-22 10:39:42

没有必要jQuery的，你可以做到，只是使用CSS：

body { 
 
    background: gray; 
 
} 
 

 
.modal { 
 
    background: green; 
 
    position: absolute; 
 
    float: left; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="modal"> 
 
    Lorem ipsum 
 
</div>

如果你喜欢这里jQuery的的解决方案是：

$(function() { 
 
    var modal = $(".modal"); 
 
    var body = $(window); 
 
    // Get modal size 
 
    var w = modal.width(); 
 
    var h = modal.height(); 
 
    // Get window size 
 
    var bw = body.width(); 
 
    var bh = body.height(); 
 
    
 
    // Update the css and center the modal on screen 
 
    modal.css({ 
 
    "position": "absolute", 
 
    "top": ((bh - h)/2) + "px", 
 
    "left": ((bw - w)/2) + "px" 
 
    }) 
 
});

body { 
 
    background: gray; 
 
} 
 

 
.modal { 
 
    background: green; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal"> 
 
    Lorem ipsum 
 
</div>

来源

2016-09-22 10:47:20 xxxmatko

'浮动：左'？ :) –

当我滚动时，模式不会移动 - 它不会保留在视口的中心 –

您可以提供一个小提琴吗？谢谢。 – xxxmatko

添加以下代码js文件。注： “#mydialog” 改变你的选择（Dialog类或ID）

$(function() { 
 
    $(window).resize(function(event) { 
 
     $('#mydialog').position({ 
 
       my: 'center', 
 
       at: 'center', 
 
       of: window, 
 
       collision: 'fit' 
 
\t   }); 
 
\t  }); 
 
}); \t

感谢，阿南德。

来源

2017-06-26 07:13:51

jQuery中的position方法不接受参数。这里有一个JS Bin展示你的代码在行动。 http://jsbin.com/?js,console,output请修改或更新您的答案。 – KryptoniteDove

尝试这样

.modal { 
    text-align: center; 
    padding: 0!important; 
} 

.modal:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -4px; 
} 

.modal-dialog { 
    display: inline-block; 
    text-align: left; 
    vertical-align: middle; 
}

，如果你喜欢的jQuery意味着试试这个

function setModalMaxHeight(element) { 
    this.$element  = $(element); 
    this.$content  = this.$element.find('.modal-content'); 
    var borderWidth = this.$content.outerHeight() - this.$content.innerHeight(); 
    var dialogMargin = $(window).width() < 768 ? 20 : 60; 
    var contentHeight = $(window).height() - (dialogMargin + borderWidth); 
    var headerHeight = this.$element.find('.modal-header').outerHeight() || 0; 
    var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0; 
    var maxHeight  = contentHeight - (headerHeight + footerHeight); 

    this.$content.css({ 
     'overflow': 'hidden' 
    }); 

    this.$element 
    .find('.modal-body').css({ 
     'max-height': maxHeight, 
     'overflow-y': 'auto' 
    }); 
} 

$('.modal').on('show.bs.modal', function() { 
    $(this).show(); 
    setModalMaxHeight(this); 
}); 

$(window).resize(function() { 
    if ($('.modal.in').length != 0) { 
    setModalMaxHeight($('.modal.in')); 
    } 
});

来源

2018-02-22 14:51:27 saravanajd

如何将模态置于屏幕中央？

回答

相关问题