トップページ >  javascript >  Simple Modalでモーダルダイアログを表示
初版2013/01/08: 最終更新日2013/01/08
  Simple Modalでモーダルダイアログを表示
目次
Simple Modalでモーダルダイアログを表示
読み込むファイル
モーダルダイアログのアラート
モーダルダイアログの確認画面
モーダルダイアログのモーダル画面
Simple Modalでモーダルダイアログを表示
IE8やChromeではshowModalDialogではモーダル表示されないですが、Simple Modalを使用すればモーダル表示することができます。
ダウンロードはこちらです。
以下のようにドラッグアンドドロップしてダウンロードしてください。





読み込むファイル
ダウンロードしたファイルをサーバ上にアップします。
最低限必要なのは以下のcssファイルとjsファイルです。(2013/01/13現在)

  • simplemodal.css
  • mootools-core-1.3.1.js
  • mootools-more-1.3.1.1.js
  • simple-modal.js
moot-core-x.y.z.jsとmootools-more-w.x.y.z.jsはDemosフォルダ内にあります。

モーダルダイアログのアラート
以下、ソースです。

<script Language="Javascript">
<!--
window.addEvent("domready", function(e){
  /* Alert */
  $("alert").addEvent("click", function(e){
    e.stop();
    var SM = new SimpleModal({"btn_ok":"Alert button"});
        SM.show({
          "title":"Alert Modalのタイトルです",
          "contents":"アラートです"
        });
  })
});
// -->

// 表示部分
<div class="example-item" id="alert">
<a href="javascript;">Alert</a>
</div>

モーダルダイアログの確認画面
以下、ソースです。

<script Language="Javascript">
<!--
window.addEvent("domready", function(e){

  /* Confirm */
  $("confirm").addEvent("click", function(e){
    e.stop();
    var SM = new SimpleModal({"btn_ok":"Confirm button"});
        SM.show({
          "model":"confirm",
          "callback": function(){
            alert("このロジックを通ります");
          },
          "title":"Confirmのタイトルです",
          "contents":"確認画面です"
        });
  })
});
// -->
</script>

<div class="example-item" id="confirm">
<a href="javascript;">Confirm</a>
</div>

モーダルダイアログのモーダル画面
以下、ソースです。動作は確認画面と同じに思います。

<script Language="Javascript">
<!--
window.addEvent("domready", function(e){

  /* Modal */
  $("modal").addEvent("click", function(e){
    e.stop();
    var SM = new SimpleModal({"btn_ok":"Confirm button"});
        // Aggiunge Bottone Conferma
        SM.addButton("Confirm", "btn primary", function(){
            alert("このロジックを通ります");
            this.hide();
        });
        // Aggiunge Bottone annulla
        SM.addButton("Cancel", "btn");
        SM.show({
          "model":"modal",
          "title":"モーダルのタイトルです",
          "contents":"<p >モーダルです</p>"
        });
  })
});
// -->
</script>

<div class="example-item" id="modal">
<a href="javascript;">Modal</a>
</div>