3

blockUI でメッセージとして表示される div のサイズを変更して、ハードコードされたファッジ ファクター (つまり、幅 - 100) を除いて、表示される画面領域を埋める必要があります。画面に小さな画像を表示できることを前提としていますが、ユーザーが拡大画像を必要とする場合は、画面に合わせたサイズのブロック UI ダイアログを表示するだけです。

画像は動的に生成されるため、アプリケーションから渡されたサイズに合わせてサイズを変更できます。

調べたところ、div を中央に配置するためのコードしか見つかりませんでした。私はこれに取り組んでいるので、答えが見つかったらここに投稿します（他の人の答えを複製しないと仮定して！）

呼び出しマークアップの非常に単純な HTML スニペットを次に示します。

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

私はJQueryを使用しています。現在のコードは次のとおりです。

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 の高さを現在使用可能なスペースを自動的に埋めるように設定する方法を理解する必要があります (CSS で ems を使用しています)が、それが別の質問であるかどうかはわかりません:)。

ありがとう ：）

4

2 に答える 2

2

私は今それを働かせました。上記のように、ウィンドウの幅と高さのメソッドを使用しました。コードは、純粋に機能させるためにいくつかのファッジ番号を想定しています:)。

最大の幅と高さをクランプしていることに注意してください。あまり多くのリソースを消費しないように、動的画像生成に移行する予定です。

また、動的画像アプリに新しいサイズを渡すコードを含めていないことに注意してください。これは、個々の実装ごとにカスタマイズされると考えました。

    $("#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   } });

    });
于 2009-03-10T14:21:26.170 に答える
0

画面ではなく、ウィンドウのサイズに合わせてダイアログのサイズを変更することしかできません。

$(window).width(); $(window).height();

于 2009-03-10T13:50:42.920 に答える