Simple Modalでモーダルダイアログを表示
| 目次 |
|---|
|
・Simple Modalでモーダルダイアログを表示 ・読み込むファイル ・モーダルダイアログのアラート ・モーダルダイアログの確認画面 ・モーダルダイアログのモーダル画面 |
Simple Modalでモーダルダイアログを表示
IE8やChromeではshowModalDialogではモーダル表示されないですが、Simple Modalを使用すればモーダル表示することができます。
ダウンロードはこちらです。
以下のようにドラッグアンドドロップしてダウンロードしてください。
ダウンロードはこちらです。
以下のようにドラッグアンドドロップしてダウンロードしてください。
読み込むファイル
ダウンロードしたファイルをサーバ上にアップします。
最低限必要なのは以下のcssファイルとjsファイルです。（2013/01/13現在）
最低限必要なのは以下のcssファイルとjsファイルです。（2013/01/13現在）
- simplemodal.css
- mootools-core-1.3.1.js
- mootools-more-1.3.1.1.js
- simple-modal.js
モーダルダイアログのアラート
以下、ソースです。
<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>