트위터 모달 위치 지정

그래서 Grails에 대한 Twitter 부트 스트랩 플러그인을 사용하고 있으며 모달링에 문제가 있습니다. 모달이 포함 된 div에서 "class"= "모달"부분을 제거하면 내 센터링 기능이 제대로 작동하지만 다시 넣을 때 (모달 기능을 수행하는 데 필요합니다.). 어떤 도움은 매우 좋은 것입니다 : D 여기 내 코드입니다 :트위터 모달 위치 지정

<a style="position: relative; top: 2px;" data-toggle="modal" href="#myModal${instanceType.id}" 
     id="${instanceType.id}"> ${message} </a> 
<div class="modal" style="background: black; overflow: hidden; top: 0px; left: 0px; display: none; border: 2px solid white; float: center; position: absolute" 
     id="myModal${instanceType.id}"> 
       <div style="border:none" class="modal-header"> 

       <a style="color:white;" class="close" data-dismiss="modal">X</a> 
     </div> 
     <iframe id="iFrame" style="border: none;"width=800px height=675px src="${action}/${instanceType.id}"> 

     </iframe> 
     <div class="modal-body" style="background: black;"></div> 
     <div style="border:none; background: black;" class="modal-footer"> 
       <a "="#" class="btn" data-dismiss="modal">Close</a> 
     </div> 

</div> 
<script> 
jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", ($(window).height() - this.height())/2+$(window).scrollTop() + "px"); 
    this.css("left", ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); 
    return this; 
} 
$(myModal${instanceType.id}).css({ 
    'width' : $(window).width()*.75, 
    'height' : $(window).height()*.75 
    }) 
$(myModal${instanceType.id}).center() 

$('#modal-footer').append('<a href="#" class="btn btn-primary" data-dismiss="modal" onclick="submitFunction()">${saveName}</a>') 
function submitFunction(){ 
     $("iFrame").contents().find("#submit").click() 
} 
function changePre(){ 
     $("iFrame").contents().find(".buttonNew").submit() 
     alert('hi') 
} 
</script>

출처

2012-06-22 Feng Huo

부트 스트랩 모달 자체가 중심입니다. 왜 수동으로하려고합니까? – Gregg

야, 나는 그것을 중심에 두지 않고 시도했는데 이상하게도 자리 매김했다. 위쪽과 아래쪽 위치 만 중앙에 배치하는 것처럼 보이지만 왼쪽과 오른쪽 위치가 자동으로 겹칩니다. 예를 들어 0px로 놓으면 페이지 왼쪽에서 벗어나게됩니다. 어떤 아이디어? –

기본 모달 스타일링 센터 절대 위치하여 모달을 사용하는 경우. 따라서 모달 윈도우를 사용자 정의하고 크기를 변경하면 관련 요소도 조정해야합니다. 모달 - 본문 및 모달 헤더와 .modal 클래스와 같습니다.

귀하의 질문에 답변하고, 귀하의 질문이 맞다면 귀하의 모달을 수직적으로 배치하려고했는지입니다.

오픈 bootstrap.css은 다음를 찾아서 편집

.modal.fade.in 기본값은 50 %입니다. 원하는 위치에 도달 할 때까지 게임을 시도하십시오. 그것을 증가 시키면 모달을 하단으로 이동시키고 감소 시키면 반대쪽으로 이동합니다.

출처

2012-08-16 04:31:41

기본 모달 크기 모달 창 위치 화면의 가로 중심, 모달 (너비 변경)을 사용자 지정하면 스크립트로 위치를 지정해야합니다.

샘플 스크립트 :

$ ('#의 myModal') 모달 ({ 배경 : 사실, 키보드 : 진정한 }).. CSS ({ 폭 : '800', // 사용자 정의 폭 'margin-left': function() { return - ($ (this) .width()/2); } });

출처

2013-09-13 12:03:06

트위터 모달 위치 지정

답변

관련 문제