常連

###前提・実現したいこと
showModalDialog()を多用しているＷＥＢシステムにおいて、
Edgeブラウザ対応を実施したいと考えております。

Edgeでは、showModalDialog()が機能しなくなるため、
代替するダイアログにて改修しようとしている中で、
現状、jQuery UI dialogでの代替をすすめています。

既存処理が別ページのHTMLをダイアログ内に表示しているため、
iFrameを利用してdialog内に表示しているのですが、
既存ページ内の任意のボタンアクション（「保存」や「キャンセル」など画面毎に異なる）結果を
呼び出し元のページに渡したいのですが、その渡し方が現状不明な状況です。

iframe外の親画面とiframe内の子画面間のデータの受け渡し方法はネット上等に情報があるのですが、
ダイアログ自体（iframe外の親画面）の呼び出し元になる「親画面」と、
「iframe内の子画面」間のデータの受け渡し方法（呼び出し元での処理方法）を
ご教示いただきたいと存じます。

また、showModalDialogの代替方法として別手法をご存知でしたら、
ご教示いただけると幸いです。

何卒よろしくお願い申し上げます。

###補足情報(言語/FW/ツール等のバージョンなど)
VB.NET
VS2005
jQuery
AJAX

showModalDialogの代替方法について

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
新規登録とログインのモーダルを作っています。
画面幅が1440pxの場合に中央に表示されるよう設定されているので、他の幅に変えると見栄えが悪く、スマートフォンだと全て表示できなくなってしまいます。
どうしたら画面の大きさを変更しても中央に表示できるか教えて頂きたく、質問致しました。
また、モーダル表示のボタンを押すとページのトップにスクロールしてしまうので、それもどうしたら解決できるか教えて頂きたいです。
エラーメッセージはありません。
よろしくお願いいたします。

### 該当のソースコード

```HTML
<header>
    <div class="container">
      <div class="header-right">
        <a href="#" class="signup-show">新規登録</a>
        <a href="#" class="login login-show">ログイン</a>
      </div>
    </div>
  </header>

  
  <div id="login-modal" class="login-modal-wrapper">
    <div class="modal">
      <div class="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>
      <div id="login-form">
        <h2>Emailログイン</h2>
        <form action="#">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <div id="submit-btn">ログイン</div>
        </form>
      </div>
    </div>
  </div>

  
  <div class="signup-modal-wrapper" id="signup-modal">
    <div class="modal">
      <div class="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>
        <div id="signup-form">
          <h2>Emailで新規登録</h2>
          <form action="#">
            <input class="form-control" type="text" placeholder="メールアドレス">
            <input class="form-control" type="password" placeholder="パスワード">
            <div id="submit-btn">新規登録</div>
          </form>
        </div>
      </div>
    </div>

```

```CSS
/*ログインモーダル*/
.login-modal-wrapper, .signup-modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 5;
  display: none;
}

.modal {
  position: absolute;
  top: 20%;
  left: 34%;
  background-color: #e6ecf0;
  padding: 20px 0 40px;
  border-radius: 10px;
  width: 450px;
  height: auto;
  text-align: center;
}

.modal .fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

#signup-form, #login-form {
  width: 100%;
}

#signup-form h2, #login-form h2 {
  color: #5f5d60;
  letter-spacing: 1px;
  margin-bottom: 40px;
}

#signup-form input, #login-form input {
  width: 320px;
  margin-bottom: 20px;
  font-size: 12px;
  padding: 12px 12px;
  border: 1px solid #d0d5d8;
  border-radius: 5px;
}

#submit-btn {
  display: inline-block;
  padding: 14px 140px;
  background-color: #5dca88;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}

```

```jQuery

  //新規登録モーダル クリックイベント
  $('.signup-show').click(function(){
    $('#signup-modal').fadeIn();
    $('.modal-overlay').addClass('.open');

  });

  //モーダル非表示
  $('.close-modal').click(function(){
    $('#login-modal').fadeOut();
    $('#signup-modal').fadeOut();
  });

  $('.modal-overlay').click(function(){
    $('#login-modal').fadeOut();
    $('#signup-modal').fadeOut();
    $('.modal-overlay').removeClass('open');
    $('.open').css('transition-duration', '5s');
  });


```


### 補足情報

足りない情報等ございましたら、教えていただければ幸いです。
追記致します。
ご回答お待ちしております。

モーダルを中央に表示したい

### 実現したいこと
「[Flip Counter Plugin](https://pqina.nl/flip/)」というプラグインを使用し、自分の誕生日を入力すると、還暦の歳になるまでのカウントダウンを表示するWEBページを作成しようとしています。

### 発生している問題・分からないこと
誕生日の入力はjQueryのdatepickerで、さらに還暦の日付も作るまではいけたのですが、それをどうしてもプラグインで表示することができません。

ページを表示した際は「1970年1月1日生まれ」の人が還暦になるまでのカウントダウンを表示し、datepickerで日付を選択すると、随時カウントダウンの数字が変わるようにしたいです。

1日かけて無理だったので、プロの方のお知恵をお借りできればと思います。よろしくお願いいたします。



### 該当のソースコード

```HTML & Javascript
<!doctype html>
<html lang="ja" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Test</title>


    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
    <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
    <script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">

    <style>
      body{font-family:"Noto Sans JP",sans-serif;font-weight:normal;background-color:#d5dfde}body p{text-align:justify}h1,h2,h3,h4,h5,hr{margin:0}.tick{width:50%;max-width:600px;margin:0 auto 4vw;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}@media screen and (max-width: 560px){.tick{width:80%}}.tick-label{font-size:.375em;text-align:center;color:gray}.tick-group{margin:0 .25em;text-align:center}#text-styled [data-view=text]{font-weight:bold;font-family:sans-serif;color:red;letter-spacing:.25em}footer{padding-top:3em}/*# sourceMappingURL=style.css.map */
    </style>

  </head>
  <body class="d-flex h-100">

    <div class="d-flex w-100 h-100 flex-column animate__animated animate__fadeIn animate__delay-1s">

      <main class="mt-auto w-100">
        <section>
          <div class="container">
            <div class="row justify-content-center flex-column">
              <div class="col-12 mb-5 text-center">
                <label for="start">誕生日を設定</label>
                <input type="text" id="datepicker">
              </div>
              <div class="col-12 cdt_tick_box">
                <div class="tick" data-did-init="handleTickInit" data-credits="false">
                    <h4 class="mb-4 text-center">あなたが還暦まであと</h4>
                    <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay">
                      <div class="tick-group">
                          <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
                              <span data-view="flip"></span>
                          </div>
                          <span data-key="label" data-view="text" class="tick-label"></span>
                      </div>
                    </div>
                </div>
                <div class="tick-onended-message">
                  <h4 class="mb-4 text-center" style="display: none;">あなたはすでに還暦を迎えています。</h4>
                </div>
              </div>
              <script>
                $( "#datepicker" ).datepicker({
                  dateFormat: "yy年mm月dd日",
                  changeMonth: true,
                  changeYear: true,
                  onSelect: function(dateText) {
                    const bd = $(this).val();
                    const re = /年|月|日/;
                    const resultSplit = bd.split(re);
                    kanrekiYear = Number(resultSplit[0]) + 60;
                    var kanreki = kanrekiYear + '-' + resultSplit[1] + '-' + resultSplit[2] + ' GMT+09:00';
                    console.log(kanreki);
                  }
                });
                $( "#datepicker" ).datepicker("setDate","1970年01月01日");

                function handleTickInit(tick) {
                  kanreki = '2030-01-01 GMT+09:00';
                  var counter = Tick.count.down(kanreki);
                  counter.onupdate = function (value) {
                    tick.value = value;
                  };
                  counter.onended = function() {
                    document.querySelector('.tick-onended-message').style.display = '';
                    document.querySelector('.tick').style.display = 'none';
                  };
                }
              </script>
            </div>
          </div>
        </section>
      </main>
      <footer class="mt-auto">
        <p class="text-center small">&copy; Test</p>
      </footer>
    </div>


  </body>
</html>

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
初期表示したカウントダウンを更新する方法が分からず。
公式のドキュメントを読んだのですが、理解できませんでした。
https://pqina.nl/tick/

### 補足
特になし

「Flip Counter Plugin」でカウンターの内容を更新したい

こんにちは。

jQueryのclickイベントが効かなくはまっております。

.css 内
```
#test-area{width:100%;border:1px solid #000}
#test-area{height:500px}
#test-area {background:-webkit-linear-gradient(#d3d3d3 1px, transparent 1px),-webkit-linear-gradient(0deg, #d3d3d3 1px, #FFF 1px);background-size:10px 10px;}

```

.html 
```
<div id ="test-area"></div>
```

#test-areaのdivをクリックするとchromeのelementタブで<body>が光っています。

jQueryで
```
  $("#test-area").click(function() {
	  alert(111); → 効きません。
  });
```

子divのクリックイベントは問題なく動いています。
```
  $(document).on("click","#test-area > div.drag", function(e) {
	  alert(222); → #test-area内のdivは効きます。
  });
```

他にpreventDefaultなどはありません。
google探したりしていますが、なかなか解決できなく質問することにしました。
chromeでもieでも現象は一緒でした。
解決方法やデバッグ方法などご存じの方は是非教えてください～

div内のクリックイベントが効かないですが、何が問題でしょうか。デバッグする方法はありますでしょうか。

bootstrapのdatetimepickerで変更された値を取得して、取得した日付をもとに一覧の表示をしようとしているのですが
変更された日付が取得できません。

console.log(dateText)で確認しても何も表示されず、onSelect: function(dateText, inst)の内の処理に入ってこない
ことまで確認しました。ググったのですが、なぜこの処理に入らないのかがわかりませんでした。

すいません、お分かりの方いらっしゃいましたらご教授お願い致します。

```html
    <div class="col-xs-2 input-group month pull-left">
        <input type="text" id="select_ym" name="">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>

    <script type="text/javascript">

        $(function(){
            var date = new Date();
	        var year = date.getFullYear();
	        var month = date.getMonth();

	        var currentMonth = new Date(year, month, 1);

	        $('#select_ym').datetimepicker({
		        locale: 'ja',
		        format : 'YYYYMM',
		        viewMode: "months",
                defaultDate: moment(currentMonth, 'YYYYMM')
	        });

            $('#select_ym').datetimepicker({
                onSelect: function(dateText, inst) {
                    console.log(dateText);
                }
            });
        });
    </script>
```

datetimepickerの値を取得

初めて質問させていただきます。

現在ショッピングサイトでお気に入り機能を作成中です。
「お気に入り」ボタンをクリックした際にダイアログを表示させたいのですが、
PC、スマホともに画面中央に表示させることができなくて困っております。
今はなぜか画面の一番左下に表示されています。

概要は以下になります。

・ベースはPHP。
・「お気に入り」ボタンをクリックするとwishlist_ajax.jsへ飛ぶ。
・wishlist_ajax.js内で処理が成功した際に呼ばれる success:〜 にダイアログ表示のJSを記述している。
================
    success:function(xml){
	    // ダイアログを作成
        dialog_html = '<div id="dialog">◯◯は既にお気に入りに登録されています。</div>';
        $(dialog_html).dialog({
        	position: [300, 2700],  // 仮の数値です
	        show: {
	        	effect: 'drop',
	        	direction: 'down'
	        },
	        hide: {
	        	effect: 'drop',
	        	direction: 'up'
	        },
	        modal: true,
	        dialogClass: "no-close",
	        buttons: {
	        	"close": function() {
	        		$( this ).dialog( "close" );
	        	}
	        }
        });
    }
================

ヘッダーでは以下を呼んでいます。
jQuery UI のバージョンは 1.11.1 です。
================
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smootheness/jquery-ui.css" rel="stylesheet" />
================


スマホだとダイアログが後ろに隠れてしまうので下記を記述して全面に表示させています。
================
div.ui-dialog {
	z-index: 99999;
}
================

なぜ position: [300, 2700] が効かないのでしょうか…。
お知恵を拝借させてください。

jquery ui ダイアログを中央に表示させたい

### 前提・実現したいこと

jqueryのdatepikerを使用して、モーダルウィンドウにてカレンダーを表示させたいと思っています。
カレンダーアイコン押下→モーダルウィンドウでカレンダー表示→選んだ日付がテキストボックスに入力

現在、datepikerでカレンダーをテキストボックスの下に入力することはできていますが、モーダルウィンドウでの表示が上手くいきません。（表示したい箇所：class='modal'）
どうしてもカレンダー部の要素がhtmlでの表示箇所がhtml下部になってしまうので、そもそもhtmlのソースを表示する個所を指定できるのでしょうか。
また、アイコンを押した後にモーダルウィンドウにてカレンダー表示できるのでしょうか。
教えていただけますと幸いです。

### 該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
        <meta name="description" content="勉強用カレンダーページです。">
        <title>カレンダーページ</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <div class="contents">
            <div class="calendar">
                <input type="text" name="datepicker" class="datepicker" value="">
                <div class="calendar__modal">
                    
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./js/index.js"></script>
    </body>
</html>
```
```css
@charset "UTF-8";

* {
  padding: 0;
  margin: 0;
}
body {
  color: #333;
  letter-spacing: 1px;
}
.contents {
  width: calc(100% - 4%);
  margin: 4% 2%;
}
.calendar {
    display: flex;
    align-items: flex-end;
    margin-top: 2%;
}
.datepicker {
    height: 4vh;
    width: 20%;
    margin-left: 1%;
}
.ui-datepicker-trigger {
    width: 5vh;
}
```

```jquery
$(function() {
  $('.datepicker').datepicker({
    buttonImage: "./common/img/calendar.png",  // カレンダーアイコン画像
    buttonText: "カレンダーから選択",  // アイコンホバー時の表示文言
    buttonImageOnly: true, // ボタンとして表示
    showOn: "both",  // アイコン、テキストボックスどちらをクリックでもカレンダー表示
    beforeShow: function(input, inst){
       inst.dpDiv.css({top: 50 + '%', left: 50 + '%'});
    }
  });
});
```

### 試したこと

検索にてカレンダーの位置を移動できるとの情報を得たので、下記のソースをjqueryにて追記してみましたが、うまく該当の要素のstyleに適用されなかったです...
beforeShow: function(input, inst){
       inst.dpDiv.css({top: 50 + '%', left: 50 + '%'});
    }

datepikerのカレンダーをモーダルウィンドウで表示したい

ワードプレスにて､jQuery UI Datepickerを利用しています｡
お手数おかけしますが､以下実装方法をご教示いただけないでしょうか?
よろしくお願いいたします><


■やりたいこと
●本店
･当日と翌日を選択不可
しつつ､
･「今日」の印を表示させる方法

●支店
本店に設定した内容を反映させないようにしたい｡
※本店の設定変更に行った場合でも､現状を維持したい｡


■実際のソース
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(function($) {
	//今日の日付
	var today = new Date();
    var today_y = today.getFullYear();
	var today_m = today.getMonth() + 1;
	var today_mm = ('0' + today_m).slice(-2);
	var today_d = today.getDate();
	var today_dd = ('0' + today_d).slice(-2);
	var todays = today_y + "-" + today_mm + "-" + today_dd;

	//明日の日付
	var tomorrow = new Date();
	tomorrow.setDate(tomorrow.getDate() + 1);
    var tomorrow_y = tomorrow.getFullYear();
	var tomorrow_m = tomorrow.getMonth() + 1;
	var tomorrow_mm = ('0' + tomorrow_m).slice(-2);
	var tomorrow_d = tomorrow.getDate();
	var tomorrow_dd = ('0' + tomorrow_d).slice(-2);
	var tomorrows = tomorrow_y + "-" + tomorrow_mm + "-" + tomorrow_dd;
	

	//本店カレンダー
	var target_days_honten = [//定休日指定
		//'2020-11-28',
	];
	//支店カレンダー
	var target_days_sakuragi = [//定休日指定
		'2020-12-28',
	];
	//本店ページ用（本店）
	$('#js-datepicker-honten').datepicker({
		minDate: 0,
		dateFormat: 'yy/mm/dd',
        beforeShowDay: function (day) {
			yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
			if ($.inArray(yymmdd, target_days_honten) == -1) {
				return [true, ""];
			}
			else {
				return [false, ""];
			}
        }
	});

	//支店ページ用（支店）
	$('#js-datepicker-sakuragi').datepicker({
		minDate: 0,
		dateFormat: 'yy/mm/dd',
        beforeShowDay: function (day) {
			yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
			if ($.inArray(yymmdd, target_days_sakuragi) == -1) {
				return [true, ""];
			}
			else {
				return [false, ""];
			}
        }
	});

	//予約ページ用
	$('#js-datepicker-main').datepicker({
		minDate: 0,
		dateFormat: 'yy/mm/dd',
        beforeShowDay: function (day) {
			var extraction_val = $(".shop-select").val();
			yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
			if (extraction_val == "本店") {
				if ($.inArray(yymmdd, target_days_honten) == -1) {
					return [true, ""];
				}
				else {
					return [false, ""];
				}
			}
			else if (extraction_val == "支店") {
				if ($.inArray(yymmdd, target_days_shiten) == -1) {
					return [true, ""];
				}
				else {
					return [false, ""];
				}
			}
        }
	});

})(jQuery);