كيفية ريفاكتور من استخدام نافذة.فتح(...) إلى غير مزعجة مشروط dhtml النافذة ؟

Question

لدي وظيفة التي تطلق نافذة جافا سكريبت مثل هذا

    function genericPop(strLink, strName, iWidth, iHeight) {
            var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
            var new_window="";

            new_window = open(strLink, strName, parameterList);
            window.self.name = "main";
            new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
            new_window.focus();
}

يتم استدعاء هذه الدالة حوالي 52 مرات من أماكن مختلفة في تطبيق ويب.

أريد أن إعادة العامل هذا الرمز إلى استخدام DHTML مشروط نافذة منبثقة.التغيير يجب أن تكون مزعجة ممكن.

للحفاظ على هذا الحل على قدم المساواة مع الحل القديم, أعتقد سوف تحتاج أيضا إلى القيام بما يلي

1. تقدم مؤشر إلى "إغلاق" النافذة.
2. ضمان النافذة لا يمكن نقلها و وضعه في وسط الشاشة.
3. طمس الخلفية كخيار.

اعتقد هذا الحل هو الأقرب إلى ما أريد, ولكن أنا لا يمكن أن نفهم كيفية إدراج ذلك.

تحرير:بضع كنت قد أعطيت لي قيادة جيدة.شكرا لك.ولكن اسمحوا لي أن إعادة الدولة مشكلتي هنا.أنا إعادة العوملة التعليمات البرمجية الموجودة.يجب تجنب أي تغيير الحاضر HTML أو CSS.من الناحية المثالية أود أن تحقيق هذا الغرض عن طريق الحفاظ على وظيفة التوقيع على genericPop(...) نفسه أيضا.

Answer 1

هنا الحل باستخدام مسج و مسج UI المكتبات.API الخاص بك هو لم يتغير , لكن المعلمة 'اسم' هو تجاهل.يمكنني استخدام iframe لتحميل المحتوى من معين strLink ثم عرض أن iframe طفلة ولدت div, والتي يتم بعد ذلك تحويلها إلى مشروط المنبثقة باستخدام مسج:

function genericPop(strLink, strName, iWidth, iHeight) {
  var dialog = $('#dialog');
  if (dialog.length > 0) {
    dialog.parents('div.ui-dialog').eq(0).remove();
  }

  dialog = $(document.createElement('div'))
    .attr('id', 'dialog')
    .css('display', 'none')
    .appendTo('body');

  $(document.createElement('iframe'))
    .attr('src', strLink)
    .css('width', '100%')
    .css('height', '100%')
    .appendTo(dialog);

  dialog.dialog({ 
      draggable: false,
      modal: true, 
      width: iWidth,
      height: iHeight,
      title: strName,
      overlay: { 
          opacity: 0.5, 
          background: "black" 
      } 
  });
  dialog.css('display', 'block');
}

// example of use
$(document).ready(function() {
  $('#google').click(function() {
    genericPop('http://www.google.com/', 'Google', 640, 480);
    return false;
  });
  $('#yahoo').click(function() {
    genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
    return false;
  });
});

وثائق مسج UI/الحوار.

Answer 2

أنا استخدم هذا الحوار رمز إلى حد كبير نفس الشيء.

إذا كنت أتذكر بشكل صحيح تطبيق الافتراضي لا يدعم تغيير حجم مربع الحوار.إذا كنت غير قادر على جعل مع واحد فقط الحجم يمكنك تعديل أو كود css لعرض متعددة الاعراض.

الاستخدام السهل:

showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');

تعديل شبيبة لدعم العديد من الاعراض:

إضافة العرض و الارتفاع سمات لإظهار مربع الحوار وظيفة مجموعة منهم إلى الحوار و الحوار-عناصر المحتوى على الخط 68

Answer 3

محاولة التحكم.نافذة, مما يتطلب النموذج

هنا هو كيف يمكنني استخدامه:

<a href="/messages/new" class="popup_window">New Message</a>

و في ملف جافا سكريبت:

$(document).observe("dom:loaded", function() {
  $$("a.popup_window").each(function(element) {
    new Control.Modal(element, { overlayOpacity: 0.75, 
                                 className: 'modal',
                                 method: 'get',
                                 position: 'center' });
  });
});

الآن إذا كنت ترغب في إغلاق حاليا المنبثقة القيام به:

Control.Modal.current.close()