كيف يمكنني autosize حوار blockui إلى المنطقة المرئية المتاحة مع مسج؟

Question

ولست بحاجة لتغيير حجم شعبة كما هو موضح في رسالة blockUI بحيث تملأ مساحة الشاشة واضحة أقل بعض العوامل ضمني حلوى (لذلك العرض - 100 يقول). والافتراض هو أنني يمكن أن تظهر صورة صغيرة على الشاشة ولكن إذا كان المستخدم يحتاج إلى صورة مكبرة ثم أنا فقط تبين لهم منع الحوار واجهة المستخدم الحجم إلى الشاشة الخاصة بهم.

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

ولقد بدا ولقد وجدت فقط رمز لتركز على شعبة. أنا أعمل على هذا حتى لو أجد جوابا أنا ما بعد ذلك هنا (على افتراض أنه لا تكرار الأجوبة إلسس أي شخص!)

وفيما يلي مقتطف أتش تي أم أل بسيط جدا لترميز الدعوة:

<div>
   <img src="someurl" class="image" height="280px" width="452px" alt="" />
</div>
<div style="text-align: right;">
   <a href="#viewpopup" id="viewpopup">View larger map</a>
</div>

وهنا العلامات المنبثقة

<div id="popup">
   <div class="titlebar">
      <div class="title left">Map details</div>
      <div class="closebuttons right"><a class="close">x</a></div>
      <div class="clearer"></div>
   </div>
   <div class="popupcontent">
   <!-- auto append content here --> 
   </div>
   <div class="buttonbar">
      <a class="close">Close</a>
   </div>
</div>

وأنا باستخدام مسج، وهنا القانون الحالي لدي:

var popup = $("#popup");
var popupcontent = popup.children(".popupcontent");
var image = $(".image");
$(document).ready(function(){
    $("#viewpopup").click(function(){
        // Fudged indent on the top left corner
        var top = 20;
        var left = 20;

        // Dynamically set the contents
        // popupcontent.empty();
        // popupcontent.append();
        $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left   } });

    });

    $(".close").live("click",function(){
        $.unblockUI();
    });
});

ولقد حصلت أيضا لمعرفة كيفية تعيين ارتفاع popupcontent لصناعة السيارات ملء حاليا المساحة المتاحة (أنا باستخدام نظم الإدارة البيئية في بلدي المغلق) ولكن أنا غير متأكد إذا كان هذا هو سؤال منفصل:)

.

والشكر:)

Answer 1

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

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

لاحظ أيضا لقد غير المدرجة رمز لتمرير أبعاد جديدة إلى التطبيق صورة ديناميكية، وأنا أحسب أنه سيكون مخصص لتنفيذ كل على حدة.

    $("#viewmap").click(function(){
        var width = $(window).width();
        if(width < 200)
            width = 200;
        if(width > 1200)
            width = 1200;

        var height = $(window).height();
        if(height < 200)
            height = 200;
        if(height > 800)
            height = 800;

        var popupwidth = $(window).width() - 100;
        var popupheight = $(window).height() - 100;
        var top = 20;
        var left = (width - popupwidth) / 2 ;
        popup.css("width", popupwidth);
        popup.css("height", popupheight);
        popupcontent.css("height", popupheight - 40) ;

        popupcontent.empty();
        popupcontent.append("<img src=\"someurl\" width=\""+ popupwidth + "\" height=\""+ (popupheight - 40) +"\" />");
        $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left   } });

    });

Answer 2

وسوف تكون قادرة على حجم مربع الحوار لحجم النافذة وليس على الشاشة.

و$ (إطار) .width ()؛ $ (إطار) .height ()؛