어떻게 받을 수 있 DIV 을 센터에서 사용하는 페이지 jQuery 및 blockUI?

StackOverflow https://stackoverflow.com/questions/294502

문제

나는 변환하려고 매트 Berseth s'유이 스타일 Yes/No 확인을 대화'그래서 나는 그것을 이용할 수 있습니다 jQuery blockUI 플러그인입니다.

나는 것을 인정해야 해요 없 CSS 전문가 그러나 내가 이것을 생각했을 것이 매우 쉽도 있습니다.을 제외한 10 시간 이후 나는 손실에서는 이유가 있을 수 있는 비난 것이 작동합니다.

문제할 수 없는 것 같다'를 얻을 confirmDialogue'DIV 터넷 페이지에없이 일부 유물을 보여주기 위습니다.또한다면 내가 다시 설정 blockUI 의 CSS 설정을 보여주고 있습니다....:

$.blockUI.defaults.css = {};

.....내가 찾는 DIV 맞춥니다.

나도 모든 종류의 물건 하지만 CSS 지 않 강한 포인트가되는 서버 측의 응아 남자:(

그렇다면 사람이 누가의 jQuery/blockUI/CSS 마법사를 이 글을 읽고하시기 바랍 수 있습니다 당신은 가서 나를 알고 내가 뭘 잘못입니까?

기본적으로 내가 다음에 설계 템플릿에서는 매트의 블로그 HTML 처럼 보이는 물건은 아래(CSS 가에서 변경되지 않은 매트의 샘플).당신이 잡을 수 있는 png'스프라이트'파일에서 완료 샘플 프로젝트에서 다운로드 http://mattberseth2.com/downloads/yui_simpledialog.zip -다.net 프로젝트 그러나 나는 그냥을 얻으려고 이 작업에는 간단한 html 파일이 없습니다.NET 지식이 필요합니다.

어쨌든 모든 조언과 지침을 것이 정말로 정말 정말 유용합니다.나는 심지어는 것을 장려하도록 구매 약속을 구입하는 당신이 많은 맥주하는 경우 우리는 이제까지 충족)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title></title>
  <script type="text/javascript" src="script/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="script/jquery.blockUI.js"></script>
  <style>
  .modalpopup
  {
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    position: absolute;
  }

  .container
  {
    width: 300px;
    border: solid 1px #808080;
    border-width: 1px 0px;
  } 

  .header
  {
    background: url(img/sprite.png) repeat-x 0px -200px;  
    color: #000;  
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 3px 10px;
  } 

  .header .msg
  {
    font-weight: bold;
  }         

  .body
  {
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 30px;
  } 

  .body .msg
  {
    background: url(img/sprite.png) no-repeat 0px -1150px;  
    float: left;
    padding-left: 22px;
  }  

  .footer
  {
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: none solid;
    border-width: 0px 1px;
    text-align:right;
    padding-bottom: 8px;
    padding-right: 8px;
  } 

  .close
  {
    right: 7px;  
    background: url(img/sprite.png) no-repeat 0px -300px;  
    width: 25px;  
    cursor: pointer;  
    position: absolute;  
    top: 7px;  
    height: 15px;
  }

  .modalBackground 
  {
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
  }     

  </style>
</head>

<body>

<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />

<div id="confirmDialogue" 
     class="modalpopup" style="display:none; text-align: center">
  <div class="container">
    <div class="header">
      <span class="msg">Are you sure?</span>
      <a onclick="return false;" class="close" 
         href="javascript: return false;"></a>
    </div>
    <div class="body">
      <span class="msg">Do you want to continue?</span>
    </div>
    <div class="footer">
      <input type="button" id="Button1" value="Yes" style="width:40px" />
      <input type="button" id="Button2" value="No" style="width:40px" />   
    </div>                                                
  </div>
</div>   

<script type="text/javascript">
  $(document).ready(function() {
    $('#triggerDialogue').click(function() {
      $.blockUI({ message: $('#confirmDialogue') });
    });
  });
</script>
</body>
</html>

@오웬-많은 주셔서 감사합니다.나를 꼬마에서 변경.modalPopup CSS 클래스에서는 매트의 스타일을:

position: fixed;

....그것은 작동합니다.많이 감사합니다.정말 꼭 함께 앉아서 나 O'reilly CSS 예약 는 기회를 얻을 수 없을 읽습니다.:)

도움이 되었습니까?

해결책

hmm 나는 익숙한 blockUI 지만,의 기초를 중심으로 div 은 꽤 보편적입니다.나는 가정 당신이 당신의 #confirmDialogue div 내에서 중심으로 전체 화면?

그렇다면,당신은 몇 가지를 수행:

#confirmDialogue {
    position: fixed;    // absolutely position this element on the page
    height: 200px;      // define your height/width so we can calculate with it after
    width: 300px;
}

지금 당신의 jQuery:

$('#triggerDialogue').click(function() {
    // to position #confirmDialogue, we need the window height/width
    var msg = $('#confirmDialogue');
    var height = $(window).height();
    var width = $(document).width();

    msg.css({
        'left' : width/2 - (msg.width() / 2),  // half width - half element width
        'top' : height/2 - (msg.height() / 2), // similar
        'z-index' : 15,                        // make sure element is on top
    });

    // etc...
});

기본적으로,당신이 원하는 위치를 고정하기 위해 귀하의 #confirmDialogue (할 수 있도록 상대적으로 위치를 창의 크기/문서입니다. left 고 top 선언이 계산되는 요소를 기반으로 현재 높이/폭,창의 높이고 문서 폭입니다.

다른 팁

이것을 살펴보십시오 jQuery msg 플러그인. 무게가 매우 가볍고 사용하기 쉽습니다.

예제 코드

// default usage, this will block the screen and shows a 'please wait...' msg
$.msg();

// this will show a 'blah blah' msg
$.msg({ content : 'blah blah' });

더 많은 옵션은 이것을 참조하십시오 데모

전체 문서를 살펴보십시오 이 게시물. 다운로드 및 소스 코드 링크가 게시물에 포함되어 있습니다.

또는 DOM 요소를 중앙 집중화하려면 이것을 시도 할 수도 있습니다. 플러그인

여기에서 유용한 정보를 찾을 수 있습니다. jQuery를 사용하여 화면의 DIV 중심

jQuery UI 대화 상자를 사용해 볼 수도 있습니다 http://jqueryui.com/demos/dialog/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top