كيف يمكنني الحصول على الدرجة مركز على صفحة باستخدام مسج blockUI?

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

سؤال

أحاول تحويل مات Berseth' ، YUI أسلوب نعم/لا تأكيد الحوار لذا يمكن استخدامه مع مسج blockUI المساعد.

أنا يجب أن أعترف أنني لا CSS المعلم ولكن أعتقد أن هذا سيكون من السهل جدا حتى بالنسبة لي....إلا 10hrs في وقت لاحق أنا في حيرة لماذا لا أستطيع الحصول على هذا الشيء اللعين إلى العمل.

المشكلة هي أنني لا يمكن أن يبدو للحصول على 'confirmDialogue' DIV تتركز على الصفحة دون بعض القطع الأثرية تبين أعلاه.بدلا من ذلك إذا أعيد تعيين blockUI CSS الإعدادات عن طريق القيام....:

$.blockUI.defaults.css = {};

.....أجد أن DIV محاذاة اليسار.

جربت كل أنواع الأشياء ولكن CSS ليست نقطة قوية كونه جانب الخادم التطبيق نوعا ما الرجل :(

حتى إذا كان هناك أي شخص الذي مسج/blockUI/CSS معالج قراءة هذا...يرجى يمكنك الذهاب واسمحوا لي أن أعرف ما أنا على خطأ ؟

أساسا أنا اتبعت تصميم القالب على مات بلوق HTML تبدو الأشياء أقل من (CSS هو دون تغيير من مات العينة).يمكنك انتزاع png 'العفريت' الملف من استكمال مشروع نموذج تحميل http://mattberseth2.com/downloads/yui_simpledialog.zip - انها .صافي المشروع ولكن أنا فقط أحاول الحصول على هذا العمل بسيط في ملف html ، لذا لا .صافي المعرفة المطلوبة.

على أي حال أي المشورة والتوجيه سيكون حقا حقا حقا مفيدة.أنا حتى تحفيز شراء أشياء واعدة لشراء الجلد من البيرة إذا نلتقي :)

<!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;

....وأنه يعمل.محل تقدير كبير.أنا حقا يجب أن نجلس مع بلدي أورايلي CSS الكتاب التي لم تحصل على فرصة لقراءة بعض الليل....:)

هل كانت مفيدة؟

المحلول

همم أنا لست على دراية 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;
}

الآن مسج:

$('#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 الإعلانات تحسب على أساس العناصر الحالية الطول/العرض النافذة ارتفاع وثيقة العرض.

نصائح أخرى

نلقي نظرة على هذا مسج المساعد 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' });

المزيد من الخيارات يرجى الاطلاع على هذه demo

وثائق كاملة يرجى إلقاء نظرة على هذا المنصب.تحميل شفرة المصدر الروابط المدرجة في هذا المنصب.

أو إذا كنت ترغب فقط في تجميع بعض عنصر DOM يمكنك أيضا محاولة هذا البرنامج المساعد

قد تجد بعض المعلومات المفيدة هنا. باستخدام مسج إلى مركز DIV على الشاشة

هل يمكن أيضا محاولة الخروج من واجهة المستخدم مسج الحوار http://jqueryui.com/demos/dialog/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top