水曜以外もどうでしょう

北海道発。食べ歩きの記録グルメ情報や北海道の見どころなどをメモ替わりに書いています。

PREV | PAGE-SELECT | NEXT

≫ EDIT

javascriptでconfirmやalertのポップアップカスタマイズ

javascriptのconfirmやalertは非常に便利だ。

簡単に確認や警告のダイアログを出すことができる。

しかし、この度、ボタンの文字列を変えてみたい案件があった。

confirmでいうと、デフォルトでは「OK」と「キャンセル」。
この文字列を変えたいと思ったが、できないらしい。


別の方法を提供している方がたが。

素晴らしい方法ですね。

http://reiw.net/labo/js/lib/dialog/

参考のJS。

呼び出し側は
<input type="button" onclick="d_alert()" value="Alert"/>
<input type="button" onclick="d_confirm()" value="Confirm"/>
<input type="button" onclick="d_prompt()" value="Prompt"/>



var dialog;

window.onload = function () {
dialog = new SdtDialog();
};

function d_alert () {
dialog.alert("Alert");
}

function d_confirm () {
dialog.confirm("OK or Cancel?", "",
function (bool) {
if ( bool ) {
dialog.alert("Yes !");
} else {
dialog.alert("No !");
}
}
);
}

function d_prompt () {
dialog.prompt("Input something.", "value", "",
function (str) { dialog.alert(str); }
);
}



ダイアログの表示もcssでコントロールしているのが素晴らしい。


他には

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter83/002/index.html

のも。

こちらは、prototype.js、effects.js、windows.jsを使うパターン。



<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="window.js"></script>
<script type="text/javascript"><!--
function openDialog()
{
Dialog.confirm("自動販売機の下に100円が落ちていると思いますか?",
{ windowParameters: {width:300, height:100},
okLabel: "はい", cancelLabel: "いいえ",
ok:function() {
alert("まあ、あんまり落ちてないですね");
},
cancel:function() {
alert("確かに、そうですね");
}
});}
// --></script>



いずれも正しく動きました。
スポンサーサイト
応援宜しくお願いします。ポチ↓↓
fC2ブログランキング にほんブログ村 グルメブログ 北海道食べ歩きへ 人気ブログランキングへ


| web系 | 00:23 | comments:0| trackbacks:0| TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://vmemo.blog36.fc2.com/tb.php/124-27c80e59

TRACKBACK

PREV | PAGE-SELECT | NEXT