지정된 컨테이너의 중간에 요소를 설정하십시오.

Question

내 앱에서 사용자가 일부 작업을 완료하면 화면 가운데에 일부 정보를 표시하려고합니다.

지금 내가 함수를 작성 (바로 플래시 메시지 등)이로 만들려면 :

var createFlashMessage = function(message, parentDom, time) { 
     parentDom = $(parentDom); 
     var mask = parentDom.children().first(); 
     if(!mask.is('message-mask')) { 
      mask = $('<div>').addClass('message-mask'); 
      mask.hide().appendTo(parentDom); 
     } 
     var messageSpan = $('<span>').html(message).appendTo(mask); 
     var conWidth = parentDom.width(), conHeight = parentDom.height(); 
     messageSpan.css({ 
      left:Math.floor(conWidth/2-messageSpan.width()/2), 
      top:Math.floor(conHeight/2-messageSpan.height()/2) 
     }).fadeIn(500,function() { 
      $(this).delay(time || 3000).fadeOut(); 
     }); 
    }; 

이 마스크 DIV를위한 CSS 스타일이다 : 그러나 때

---

.message-mask 
{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

I 그것을 실행, 마스크 div 컨테이너에 의해 올바른 위치에 배치 할 수없는 것으로 나타났습니다.

만드는 방법은?

Answer 1

는 팝업의 z-index를 증가는 float-left 당신이 할 수 있도록 :

이

messageSpan.css('margin-left', ((conWidth - messageSpan.width())/2)); 
messageSpan.css('margin-top', ((conHeight - messageSpan.height())/2)); 

또한 메세지를 지정하지 않고 마스크보다 같이되어야한다 :

.message-mask { 
    position:fixed; 
    display: none; 
    width: 100%; 
    height: 100%; 
    left:0px; 
    top:0px; 
    z-index: 9998; 
} 

그런 다음 팝업을 표시하면 배경을 숨 깁니다.

Answer 2

저는 C#을 사용하는 사람이 더 많으므로 잘 모르겠지만 더 많이 생각해야합니다. 시도

 left:Math.floor((conWidth/2)-(messageSpan.width() /2)), 
     top:Math.floor((conHeight/2)-(messageSpan.height() /2)) 

Answer 3

,

.message-mask 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}