jQuery UI Dialog で表示しているので、dialogfocus と observer を使って画面の中央に移動。できれば CSS のみで済ませたいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
(function () { // Display the Kuroneko Web Collect Dialog in the center of the screen on Welcart Shop jQuery("body").bind("dialogfocus", function (e) { const resizeable = e.target; const observer = new MutationObserver(() => { const d = jQuery('#kuroneko_web-dialog'); d.css({ left: 0 }); // 正しい幅を取得するために一旦左端に移動 d.css({ left: (jQuery(window).width() - d.outerWidth(true)) / 2 + "px", top: (jQuery(window).height() - d.height()) / 2 + jQuery(window).scrollTop() + "px" }); }); observer.observe(resizeable, { attriblutes: true, childList: true, subtree: true, }); }); })(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#kuroneko_web-dialog border: 4px solid transparent background-color: transparent max-width: 100% .ui-dialog-titlebar padding: 6px 1% 5px 1% text-align: center height: auto !important background-color: #fff border-top: 1px solid #333 border-left: 1px solid #333 border-right: 1px solid #333 border-top-left-radius: 4px border-top-right-radius: 4px background-color: aliceblue .ui-dialog-titlebar-close display: none #kuroneko_web-token-dialog background-color: #fff border-left: 1px solid #333 border-bottom: 1px solid #333 border-right: 1px solid #333 border-bottom-right-radius: 4px border-bottom-left-radius: 4px .ui-widget-overlay background-color: #c6c6c6 .ui-dialog box-shadow: none |
さらに下記を適用することでモバイル端末でも見やすく表示：
見た目の良いレスポンシブなテーブルを作成 / Creating visually appealing responsive tables