jQuery「simplaModalwindow.js」をカスタマイズしてシンプルなモーダルウィンドウが実装できた

お仕事でモーダルウィンドウを実装するように依頼されました。モーダルウィンドウを実装するにあたって選択肢はいくつかありますが、より動作が軽そうだったのとシンプルな外観が気に入って「simplaModalwindow.js」を導入しました。その際、自分の知識不足で少し詰まった箇所がありましたので、自分のための備忘録も兼ねて情報を公開したいと思います。

simplaModalwindow.jsとは

simplaModalwindow.jsは、web-park.org様で公開されているjQueryのプラグインです。使い方はとてもシンプル。aタグの中にクラス名「modal」を指定するだけと非常にお手軽です。詳しい手順やDLは下記より。

simplaModalwindow.jsでカスタマイズした部分

カスタマイズした理由

さて自分がカスタマイズした理由ですが、simplaModalwindow.jsはモーダルウィンドウで表示させたい要素の横幅と高さ、デバイスの画面の横幅と高さを自動取得し、画面中央に自動で表示してくれます。しかしこの時、モーダルウィンドウの要素の高さが、実際のデバイスの高さより大きかった場合、自動でリサイズし実際のデバイスの画面内に収まろうとします。それ自体は非常にありがたい機能ではあるのですが、今回の自分のデザインではモーダルウィンドウの横幅と高さはともに最初から決まっていたために、リサイズされるととても変。というわけで未熟ながら四苦八苦して高さのリサイズ機能をOFFにした次第です。

カスタマイズ方法

では実際の手順です。まずはweb-park.orgからsimplaModalwindow.jsをDLします。simplaModalwindow.jsをエディタで開きます。すると94行目からif文で高さに関する記述があるのが分かるかと思います。

if (windowH > h) {
    $("#" + DC).stop(false, true).animate({
        marginTop: -h / 2 + "px",
        marginLeft: -w / 2 + "px",
        width: w + "px",
        height: h + "px"
    }, 300);
} else {
    $("#" + DC).stop(false, true).animate({
        marginTop: -windowH / 3 + "px",
        marginLeft: -w / 2 + "px",
        width: w + "px",
        height: windowH / 2 + "px"
    }, 300);
}

下から3行目のheight:の記述が/2されていますよね。ですので、これを下記のように変更します。

if (windowH > h) {
    $("#" + DC).stop(false, true).animate({
        marginTop: -h / 2 + "px",
        marginLeft: -w / 2 + "px",
        width: w + "px",
        height: h + "px"
    }, 300);
} else {
    $("#" + DC).stop(false, true).animate({
        marginTop: -windowH / 3 + "px",
        marginLeft: -w / 2 + "px",
        width: w + "px",
        height: h + "px"
    }, 300);
}

はい、これで高さがリサイズされることはなくなりました。

まとめ

こんな感じで、「simplaModalwindow.js」jQueryプラグインのリサイズ機能をOFFにできました。自分はまだ未熟なものでjQueryプラグインは使わせてもらってカスタマイズしているばかりですが、いずれ自分でもjQueryプラグインを自作して公開できるようになりたいですね。