質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

4834閲覧

confirmを用いたポップアップウインドウの表示位置について

ozino

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/04/11 08:02

編集2022/01/12 10:55

confirmを用いたポップアップウィンドウをウェブページに実装しております。
その画面に表示されるリストが多く、ポップアップウィンドウが下部までスクロールしなければ見えないため
操作性が悪くなっております。

ブラウザはクロームを想定しております。

javasprict

1/** 2 * 【出欠・提出物状況設定】 一括更新ボタン押下時イベント(jQuery) 3 */ 4$(function(){ 5 $("#atdUpdate").click(function(){ 6 jConfirm('下記に表示されている項目全てに対して更新処理が行われます。実行しますか?', '実行確認', function(r) { 7 if(r){ 8 $('form').submit(); 9 }else{ 10 jAlert('出欠・提出物状況の更新処理を中止します。', '中止'); 11 } 12 }); 13 }) 14}) 15/** 16 * 【訓練休設定】 一括更新ボタン押下時イベント(jQuery) 17 */ 18$(function(){ 19 $("#calUpdate").click(function(){ 20 jConfirm('対象年月入所生に対する出欠情報テーブルの作成・更新を行います。よろしいですか?', '実行確認', function(r) { 21 if(r){ 22 $('form').submit(); 23 }else{ 24 jAlert('出欠情報テーブルの作成・更新処理を中止します。', '中止'); 25 } 26 }); 27 }) 28}) 29/** 30 * 【一括退所設定】 一括更新ボタン押下時イベント(jQuery) 31 */ 32$(function(){ 33 $("#leaveUpdate").click(function(){ 34 jConfirm('一括退所処理を実行します。実行後、退所を取り消す場合は訓練生情報閲覧画面から個々に変更する必要があります。実行しますか?', '実行確認', function(r) { 35 if(r){ 36 $('form').submit(); 37 }else{ 38 jAlert('一括退所処理を中止します。', '中止'); 39 } 40 }); 41 }) 42}) 43

javasprict

1// jQuery Alert Dialogs Plugin 2// 3// Version 1.1 4// 5// Cory S.N. LaViska 6// A Beautiful Site (http://abeautifulsite.net/) 7// 14 May 2009 8// 9// Visit http://abeautifulsite.net/notebook/87 for more information 10// 11// Usage: 12// jAlert( message, [title, callback] ) 13// jConfirm( message, [title, callback] ) 14// jPrompt( message, [value, title, callback] ) 15// 16// History: 17// 18// 1.00 - Released (29 December 2008) 19// 20// 1.01 - Fixed bug where unbinding would destroy all resize events 21// 22// License: 23// 24// This plugin is dual-licensed under the GNU General Public License and the MIT License and 25// is copyright 2008 A Beautiful Site, LLC. 26// 27(function($) { 28 29 $.alerts = { 30 31 // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time 32 33 verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels 34 horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/ 35 repositionOnResize: true, // re-centers the dialog on window resize 36 overlayOpacity: .01, // transparency level of overlay 37 overlayColor: '#FFF', // base color of overlay 38 draggable: true, // make the dialogs draggable (requires UI Draggables plugin) 39 okButton: '&nbsp;OK&nbsp;', // text for the OK button 40 cancelButton: '&nbsp;Cancel&nbsp;', // text for the Cancel button 41 dialogClass: null, // if specified, this class will be applied to all dialogs 42 43 // Public methods 44 45 alert: function(message, title, callback) { 46 if( title == null ) title = 'Alert'; 47 $.alerts._show(title, message, null, 'alert', function(result) { 48 if( callback ) callback(result); 49 }); 50 }, 51 52 confirm: function(message, title, callback) { 53 if( title == null ) title = 'Confirm'; 54 $.alerts._show(title, message, null, 'confirm', function(result) { 55 if( callback ) callback(result); 56 }); 57 }, 58 59 prompt: function(message, value, title, callback) { 60 if( title == null ) title = 'Prompt'; 61 $.alerts._show(title, message, value, 'prompt', function(result) { 62 if( callback ) callback(result); 63 }); 64 }, 65 66 // Private methods 67 68 _show: function(title, msg, value, type, callback) { 69 70 $.alerts._hide(); 71 $.alerts._overlay('show'); 72 73 $("BODY").append( 74 '<div id="popup_container">' + 75 '<h1 id="popup_title"></h1>' + 76 '<div id="popup_content">' + 77 '<div id="popup_message"></div>' + 78 '</div>' + 79 '</div>'); 80 81 if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass); 82 83 // IE6 Fix 84 var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 85 86 87 88 89 /*$(function() { 90 var nav = $('.popup_container'); 91 //navの位置 92 var navTop = nav.offset().top; 93 //スクロールするたびに実行 94 $(window).scroll(function () { 95 var winTop = $(this).scrollTop(); 96 //スクロール位置がnavの位置より下だったらクラスfixedを追加 97 if (winTop >= navTop) { 98 nav.addClass('fixed') 99 } else if (winTop <= navTop) { 100 nav.removeClass('fixed') 101 } 102 }); 103 }); 104*/ 105 106 107 108 $("#popup_container").css({ 109 position: pos, 110 zIndex: 99999, 111 padding: 0, 112 margin: 0 113 }); 114 115 $("#popup_title").text(title); 116 $("#popup_content").addClass(type); 117 $("#popup_message").text(msg); 118 $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') ); 119 120 $("#popup_container").css({ 121 minWidth: $("#popup_container").outerWidth(), 122 maxWidth: $("#popup_container").outerWidth() 123 }); 124 125 $.alerts._reposition(); 126 $.alerts._maintainPosition(true); 127 128 switch( type ) { 129 case 'alert': 130 $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>'); 131 $("#popup_ok").click( function() { 132 $.alerts._hide(); 133 callback(true); 134 }); 135 $("#popup_ok").focus().keypress( function(e) { 136 if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click'); 137 }); 138 break; 139 case 'confirm': 140 $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>'); 141 $("#popup_ok").click( function() { 142 $.alerts._hide(); 143 if( callback ) callback(true); 144 }); 145 $("#popup_cancel").click( function() { 146 $.alerts._hide(); 147 if( callback ) callback(false); 148 }); 149 $("#popup_ok").focus(); 150 $("#popup_ok, #popup_cancel").keypress( function(e) { 151 if( e.keyCode == 13 ) $("#popup_ok").trigger('click'); 152 if( e.keyCode == 27 ) $("#popup_cancel").trigger('click'); 153 }); 154 break; 155 case 'prompt': 156 $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>'); 157 $("#popup_prompt").width( $("#popup_message").width() ); 158 $("#popup_ok").click( function() { 159 var val = $("#popup_prompt").val(); 160 $.alerts._hide(); 161 if( callback ) callback( val ); 162 }); 163 $("#popup_cancel").click( function() { 164 $.alerts._hide(); 165 if( callback ) callback( null ); 166 }); 167 $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) { 168 if( e.keyCode == 13 ) $("#popup_ok").trigger('click'); 169 if( e.keyCode == 27 ) $("#popup_cancel").trigger('click'); 170 }); 171 if( value ) $("#popup_prompt").val(value); 172 $("#popup_prompt").focus().select(); 173 break; 174 } 175 176 // Make draggable 177 if( $.alerts.draggable ) { 178 try { 179 $("#popup_container").draggable({ handle: $("#popup_title") }); 180 $("#popup_title").css({ cursor: 'move' }); 181 } catch(e) { /* requires jQuery UI draggables */ } 182 } 183 }, 184 185 _hide: function() { 186 $("#popup_container").remove(); 187 $.alerts._overlay('hide'); 188 $.alerts._maintainPosition(false); 189 }, 190 191 _overlay: function(status) { 192 switch( status ) { 193 case 'show': 194 $.alerts._overlay('hide'); 195 $("BODY").append('<div id="popup_overlay"></div>'); 196 $("#popup_overlay").css({ 197 position: 'absolute', 198 zIndex: 99998, 199 top: '0px', 200 left: '0px', 201 width: '100%', 202 height: $(document).height(), 203 background: $.alerts.overlayColor, 204 opacity: $.alerts.overlayOpacity 205 }); 206 break; 207 case 'hide': 208 $("#popup_overlay").remove(); 209 break; 210 } 211 }, 212 213 _reposition: function() { 214 var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset; 215 var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset; 216 if( top < 0 ) top = 0; 217 if( left < 0 ) left = 0; 218 219 // IE6 fix 220 if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop(); 221 222 $("#popup_container").css({ 223 top: top + 'px', 224 left: left + 'px' 225 }); 226 $("#popup_overlay").height( $(document).height() ); 227 }, 228 229 _maintainPosition: function(status) { 230 if( $.alerts.repositionOnResize ) { 231 switch(status) { 232 case true: 233 $(window).bind('resize', $.alerts._reposition); 234 break; 235 case false: 236 $(window).unbind('resize', $.alerts._reposition); 237 break; 238 } 239 } 240 } 241 242 } 243 244 // Shortuct functions 245 jAlert = function(message, title, callback) { 246 $.alerts.alert(message, title, callback); 247 } 248 249 jConfirm = function(message, title, callback) { 250 $.alerts.confirm(message, title, callback); 251 }; 252 253 jPrompt = function(message, value, title, callback) { 254 $.alerts.prompt(message, value, title, callback); 255 }; 256 257})(jQuery);

プログラミング初心者のため、どうしたらいいかが全くわかっておりません。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/04/11 08:05

質問タイトル横にある初心者アイコンをご活用ください。質問文内で語るより分かりやすいです。 また、JavaとJavaScriptをタグにつけられていますが「Java」の要素は質問を見る限り見られません。どちらで「Java」をご利用でしょうか?(名前だけ似て非なるものなので一緒くたにするべきではありません)
m.ts10806

2018/04/11 08:06

また、jQuery Alert Dialogs Pluginについては何か改修されたのでしょうか?ダウンロードそのまま利用されているのであれば、取得してきた先のURLのみで充分です。
defghi1977

2018/04/11 11:28

> その画面に表示されるリストが多く、ポップアップウィンドウが下部までスクロールしなければ見えないため 操作性が悪くなっております。 ・・・で,何をどうされたいのですか?
guest

回答1

0

古いライブラリを修正するよりも、別ライブラリを探されてはいかがでしょうか。

【無料で使えるモーダルウィンドウ用ライブラリとプラグイン10選!|SeleQt【セレキュト】】
https://www.seleqt.net/design/free-modal-window-libraries-plugins/

投稿2018/04/11 16:10

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問