Plugin phương thức của Bootstrap 2 không được hiển thị bởi trung tâm

Tôi sử dụng plugin phương thức bootstrap. Nhưng hộp thoại phương thức không được hiển thị ở chính giữa. Tại sao? lỗi của tôi?Plugin phương thức của Bootstrap 2 không được hiển thị bởi trung tâm

http://dl.dropbox.com/u/573972/stackoverflow/bootstrap/modal.html

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <!-- Mobile Specific--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- CSS--> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script> 
</head> 
<body> 
    <div id="login" class="modal"> 
    <div class="modal-header"> 
     <h3>Login to Room fuga</h3> 
    </div> 
    <div class="modal-body"> 
     hogehoge 
    </div> 
    </div> 
    <script src="bootstrap.min.js"> 
    </script> 
    <script> 
$('#login').modal(); 
</script> 
</body> 
</html>

Nguồn

2012-04-28 cpw

tôi thấy workarround này để khắc phục vấn đề này:

$('#YourModal').modal().css(
      { 
       'margin-top': function() { 
        return -($(this).height()/2); 
       } 
      })

Nguồn: https://github.com/twitter/bootstrap/issues/374

Nguồn

2012-05-20 14:05:40 P48l0

Giải pháp này không hoạt động: http://jsfiddle.net/sonic1980/szFtE/ – Peter

Cảm ơn, Đã lưu ngày –

Tôi đã xóa dấu trừ trước ($ this) để thêm lề dương cao thay vì lề âm và căn giữa hộp thoại của tôi theo chiều dọc trong bootstrap 3. Sử dụng giải pháp trực tiếp dường như di chuyển hộp thoại của tôi ra ngoài vùng hiển thị. – angularsen

-14

Bạn có thử:

$("#login").dialog({ 
    modal: true 
});

Ref: http://jqueryui.com//demos/dialog/modal.html

Nguồn

2012-04-28 12:42:32 Osman

Đây có phải là cách sử dụng jquery ui không? Tôi muốn sử dụng plugin phương thức bootstrap. lấy làm tiếc. – cpw

nếu hộp thoại phương thức khởi động twitter của bạn không được căn giữa theo chiều ngang, bạn có thể sửa lỗi này qua css.

chỉ cần cung cấp cho hộp thoại phương thức một lề trái tiêu cực bằng một nửa chiều rộng của nó như ví dụ: vậy:

.modalDialogBlabla { 
    margin: 0 0 0 -250px; 
    width: 500px; 
    }

Nguồn

2012-09-12 08:02:57 nerdess

Giải pháp rất sạch sẽ và rất đẹp! Và mặc dù nó không trả lời câu hỏi (theo chiều dọc), nó làm việc như một sự quyến rũ cho chiều ngang. –

vâng cảm ơn vì điều này! – the0ther

tuyệt vời. Trình tiết kiệm thời gian tuyệt vời nếu bạn không sử dụng các giá trị mặc định. Cảm ơn nerdess! – Hcabnettek

Capture sự kiện show của .modal và sau đó tính toán vị trí mới:

$('body').on('show', '.modal', function(){ 
    $(this).css({'margin-top':($(window).height()-$(this).height())/2,'top':'0'}); 
});

DEMO: http://jsfiddle.net/sonic1980/b2EHU/

Nguồn

2012-12-30 17:51:03 Peter

Dựa trên câu trả lời p4810 của trên nhưng đối phó với nơi người dùng cũng có trên màn hình. Hoạt động với định vị tuyệt đối.

$('#YourModal').modal().css(
      { 
       'margin-top': function() { 
        return window.pageYOffset-($(this).height()/2); 
       } 
      });

Nguồn

2013-02-06 22:21:04 steve

Không hoạt động trên IE9, có điều gì đó IE không hiểu về điều này? – Notflip

Plugin phương thức của Bootstrap 2 không được hiển thị bởi trung tâm

Trả lời

Các vấn đề liên quan