1. jQueryのダイアログを中央に表示する

    全体幅を決めている場合など、中央に表示されなくて困った時のために。

    まず以下のコードで画面のスクロール量を取得します。

    var sclLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var sclTop = document.body.scrollTop || document.documentElement.scrollTop;

     次に、画面の幅と高さを取得。
    var width = window.innerWidth;
    var height = window.innerHeight;

    あとはダイアログの幅と高さを取得して計算後、ダイアログにセットし直します。

    ダイアログのclass名は環境によって違っている場合もあるので、デベロッパーツール等で確認して下さい。

    以下、全体のコードです。
    $("#dialog").dialog("open"); 
    //ダイアログオープン後中央寄せ
    dialogCentering();

    function dialogCentering(){
    //スクロール分を取得
    var sclLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var sclTop = document.body.scrollTop || document.documentElement.scrollTop;

    //画面幅取得
    var width = window.innerWidth;
    var height = window.innerHeight;

    //ダイアログ幅取得
    var d_w = $("div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all").width();
    var d_h = $("div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all").height();

    //画面の中での真ん中位置
    var left = (width - d_w) / 2 ;
    var top = (height - d_h) / 2 ;

    //スクロール幅を足す
    left = left + parseInt(sclLeft);
    top = top + parseInt(sclTop);

    $("div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all").css("left", left + "px");
    $("div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all").css("top", top + "px");
    }

     

    参考にさせていただいたブログ様です。感謝です。

    http://javascript123.seesaa.net/article/269670567.html

    http://tokidoki-web.com/2013/05/%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%84%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%84%E5%90%91%E3%81%8D%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6/

    Posted by Shunsuke Hayashi on 2014年04月21日
    Categories javascript jQuery