jQuery.UiのDialogを使ってみた
jQuery.Uiを使う
必要な処理
jquery.ui用のCssと当然ながら、jqueryとjquery.uiのjsの追加が必要だ。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
dialogを表示
の中身をdialogとして表示してくれる。
<script> $( function() { $( "#dialog" ).dialog(); } ); </script> <div id="dialog" title="Basic dialog"> </div>
dialogのopen/close時の処理を実装し、openするタイミングでのみ動く様に出来る。
$( function() { $( "#dialog" ).dialog({ open: function (event) { // <input id="open_action" onclick="actiondetail()" />を実行する。 $("#open_action").trigger("click"); }, close: function (event) { $(this).dialog("destroy"); } }); } );
dialogにボタンを配置しボタンクリックイベントで処理を実行する。
$( function() { $( "#dialog" ).dialog({ button: { OK: function () { $(this).dialog("close"); } }, close: function (event) { $(this).dialog("destroy"); } }); } );
[問題]jQueryUiのDialog表示時、ポップアップが表示されてからページが先頭になる。
Clickイベントの最後にReturn falseすることで解決した。
$('#btnOrderKbn').click(function () { $("#dialogdiv").dialog("open"); return false; });