HTML. dialog="ダイアログセレクタ" でダイアログを指定する:
<form id="main-form" method="get">
<!-- ボタンでダイアログをだす -->
<input id="id-harajuku" class="modal" dialog="#id-modal-post"
type="image" src="harajuku_st.jpg" name="harajuku" />
<input id="id-prince" class="modal" dialog="#id-modal-post"
type="image" src="prince.jpg" name="prince" />
<hr/>
<!-- アンカーでもダイアログを出す -->
<a id="id-google" class="modal" dialog="#id-modal-get"
href="http://www.google.com"> Google</a>
<a id="id-home" class="modal" dialog="#id-modal-get"
href="index.html?home" >Home</a>
</form>
HTML :
<div class="modal-dialog" id="id-modal-post">
<span class="alert">よろしければデータを送信します</span>
<span class="button cancel">取消</span>
<span class="button ok" >送信</span>
</div>
<div class="modal-dialog" id="id-modal-get">
<span class="alert">よろしければサイトに移動します</span>
<span class="button cancel">取消</span>
<span class="button ok" >送信</span>
</div>
スクリプト:
$(function(){
$("div.modal-dialog")
.dialog({autoOpen:false});
$("input.modal,a.modal").click(function(e){
clicker = $(this);
if ( clicker.attr('gate') == 'open'){
clicker.attr('gate','close');
if(clicker.prop('tagName').toUpperCase() == 'A')
// return true だと移動しない...
window.location = clicker.attr('href');
return ;
}
dialog = $(clicker.attr("dialog") );
dialog.dialog('open');
dialog.find('.ok').click(function(e){
dialog.dialog("close");
clicker.attr("gate","open").click();
}).button();
dialog.find('.cancel').click(function(e){
dialog.dialog("close");
}).button();
e.preventDefault() ;
});
});