如何將模態置於屏幕中央？

如何將模態置於屏幕中央？這是我的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

如何將模態置於屏幕中央？

回答

相關問題