常連

ポップアップの確認ダイアログと、別のメソッドがうまくいきません

現在、Javaを使ったプログラミングをしており、その中でJSPを使ってブラウザ上のページを作っているのですが、そこで、ポップアップで確認ダイアログをつけるように言われています
お聞きしたい問題点は、

・onloadの時に発動させる別メソッドと一緒に動いてしまう（ページ読み込み時に動いてしまう）
・キャンセル（if分の分岐でelseになった処理＝false）がなぜか全部OK（＝true）になってしまう

ということです。これらを解決させたいです。

```lang-Java
<script type="text/javascript">
	function start() {// ページ読み込み時の処理（onload)
<%mb.mcdSearch();%>// サーブレットのメソッド呼び出し
	}
</script>

<script type="text/javascript">
	function start() {
<%mb.mcdSearch();%>
	}
</script>
<script type="text/javascript">
	function disp() {
		// 「OK」時の処理開始 ＋ 確認ダイアログの表示
		var res = confirm("本当によろしいですか？");
		if (res == true) {
             return true;
		}
		// 「OK」時の処理終了
		// 「キャンセル」時の処理開始
		else {
			window.alert('キャンセルされました'); // 警告ダイアログを表示
			return false;
		}
		// 「キャンセル」時の処理終了
	}
</script>



	<form method="post" action="servletのアクション">
//ボタンを押すアクション
<td>
<button type="submit" name="delete" value="<%=servletからの値()%>" onClick="disp()">このボタンを押して発動</button></td>
</form>


```


jsでtrueの時にsubmitが発動してservletに値が送られるようにしたいです
確認ダイアログでokボタンを押したらservletのアクションが発動できるようにしたいので、それが実現できるようなアドバイスをいただきたいです

よろしくお願いします

javascript ポップアップ確認ダイアログの発動とjsp

### 前提・実現したいこと
jQueryの「Lity」を使用して、
画像をクリックしたら自作のmp4動画をポップアップ、自動再生したいと思っております。
自分で組んだコードでは、ポップアップ後の自動再生の再生位置がバラバラになってしまいます。
※初回の再生も中途半端な位置から再生されます。再生位置は毎回違って規則性はないように思います。

同じコードをサイト内の色々なページで使用して、どこでも最初から見れるようにしたいです。
毎回ポップアップ後の動画を始めから再生するには、どのように処理すれば良いかご教授頂けますと幸いです。


#ソースコード（HTML)
```lang-HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />  
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script> 


<a href='#popup' data-lity="data-lity"> <img src='（画像のurl）aaa.PNG' width='200' height='auto' title="aaa動画"/></a>

<div id='popup' class="lity-hide">    
<video autoplay="true" controls="controls" controlslist="nodownload"　height="600" id="video201961115307" poster="" width="800"><source src="（動画のurl）aaa.mp4" autoplay />Your browser doesn&#39;t support video.<br />
Please download the file: <a href="（動画のurl）aaa.mp4">video/mp4</a></video>
</div>

```


### 試したこと

※コード内の「autoplay="true"」を「autoplay="false"」にした場合も同じでした。


ここにより詳細な情報を記載してください。

jQueryの「Lity」を使用して、動画をポップアップ・自動再生したい

JavaScript初心者で、勉強のためにモーダルを作成しています。
モーダル自体はちゃんと動いていて、モーダルを表示した時の背景が暗くなるような表示も出来ています。
ただ現在、モーダルそのものも、背景も、どちらもスクロール出来てしまう状態です。
モーダルへ繋がるボタンをクリックしたその場でモーダルと背景を固定したいのですが、どのようなJSを書けば出来ますでしょうか？
暗い背景のdivとモーダルのdivは、現在body直下にあります。
まだjQueryを勉強していないので、出来ればJavaScriptの書き方で教えていただけるとありがたいです。

```ここに言語を入力
<div id="full"></div>
<div id="modalInfo" style="display: none;">
　　　　　モーダルの内容をここに書いています。
</div>
```

fullのidがついたdivが背景用で、モーダルが表示されてる間はover_rayというclassがつく処理を書いています。
ふたつともbodyの直下にあります。

よろしくお願いいたします。

作成したモーダルと背景をその場で固定したい（JavaScript）

こんにちは、プログラミング初心者でWebアプリを作っており、
現在、JavaScriptの簡単なところで詰まってしまいました。

あるWebアプリをコピーして練習をしているのですが、
元々のhtmlのソースに処理をしていくので、
だいぶわかりにくくなってしまっています。

そこで、今回はポップアップを表示させて、
「キャンセル」ボタンを押すと
そのポップアップが閉じる処理をJavaScriptにさせたいです。

現状は、ポップアップは表示できたのですが、
閉じる処理がどうもできません。
何卒ご教授願います。

こちらが、関係があると思われるソースコードです。
```lang-＜html＞

<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>

 
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
	<form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか？</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); return false;">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>


<script type="text/javascript">
$(function () {
	$('#choice_84462_popup').magnificPopup({
		type: 'inline',
		preloader: false
	});
	$(document).on('click', '.btnCancel-choice', function (e) {
		e.preventDefault();
		$.magnificPopup.close();
	});
});
</script>
```

だいぶ画面とにらめっこをしていたのですが、
わかりません。
よろしく御願い致します。

JavaScriptでポップアップが閉じられない

### やりたいこと
下図青丸のように、コードを入力したら、ポップアップで予測変換ウインドウを出したいです。

![イメージ説明](dce049d72add379ce33e5577829f4377.png)

### 詰まっていること
しかし、この機能の正式名称が分からず、調べてもイマイチ目的の記事がヒットできません。

PhpStormだったら、特に設定もなくできたはずなのですが、同じJetBrains社製でも違い、Intelli J Ideaでは別途、設定が必要なのかな？と思い、悩んでいます。

### 現状
![イメージ説明](3e8e06d903869ffb7b505c2285e7a8e9.png)
例えば、「System」と入力しても何も予測ウインドウが出ません。

どんな設定をしたらよいでしょうか？


---
追記1：
ご回答いただいた内容を反映させました。
![イメージ説明](1be2e36eae3049b059d2cac58e52b2a6.png)
![イメージ説明](c3b1fac926d6ff52b294ecd79396b956.png)
しかしながら、「System.」と入力しても「out」は候補に出ず、lambdaとnewだけでした。。。

職場のEclipseでは「System.」と打つと「out」が補完されるのですが、Intelli J Ideaでの補完は、この程度という認識をした方がよいのでしょうか？

（PhpStormではとても強力な補完機能だったので、年費5万弱するIntelli J Ideではもっと高性能だと勝手に期待していた自分がいました。。。）

---
追記２：
![イメージ説明](715310f3b921bd191bd4214dfe2637da.png)
コード補完を有効にしたのにもかかわらず、「Calender」のCa入力をしても、「候補なし」となってしまいまして。。。

Intelli J で予測変換？ポップアップ？補完？を出したい！

### 前提・実現したいこと
![イメージ説明](47a4e9f3c8d2630403c6f2b38e9ddd96.png)
phpやjsを勉強中の初心者です。

予約システム作ろうとしています。

日付をクリックするとポップアップで時間が選べるメニューを表示させたいのですが
うまく動作しません
どこが間違っているのでしょうか
ご教授のほどよろしくお願いいたします。

### おきている問題　エラーメッセージ

https://pixelog.net/post/rb8orj/
を参考に、ポップアップメニューを表示させたいのですが
現在の状態では日付をクリックしても反応がありません。


reserv-output.php:16 Uncaught TypeError: click is not a function
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (reserv-output.php:16)
(anonymous) @ reserv-output.php:16



### 該当のソースコード
```js
(function () {
  document.addEventListener('DOMContentLoaded', function() { 
    const calendarArea = document.getElementById('calendar-area'),
btns = calendarArea.querySelectorAll('.dropdown__btn'); // ボタンを取得
    if(btn) { 
      btn.addEventListener('click', function(){ //ボタンがクリックされたら
        this.classList.toggle('is-open'); // is-openを付加する
      });
    }
  });
}());
```
```php

<?php
$pdo=new PDO('mysql:host=localhost;dbname=sample;charset=utf8',
	'root', 'root'); 
?>
<div class="wrapper">

<h1 id="header">
<?php
echo "<div>".$now_year.'年'.$now_month."月</div>\n";
?>
</h1>
		

		
<?php
$now_year = date("Y"); // 現在の年を取得
$now_month = date("n"); // 在の月を取得
$now_day = date("j"); // 現在の日を取得
// 曜日の配列作成
$weekday = array( "日", "月", "火", "水", "木", "金", "土" );
// 1日の曜日を数値で取得
$fir_weekday = date( "w", mktime( 0, 0, 0, $now_month, 1, $now_year ) );
?>				
		
<div id="calendar-area">
<table>
<tbody>
<tr class="day0fweek">
 <?php
$i = 0;
 while( $i <= 6 ){
					 
 if($i == 0){
 $style = "#C30";
}
else if( $i == 6){
$style = "#03C";
}
else{
$style = "black";
}
					 
echo "\t<th style=\"color:".$style."\">".$weekday[$i]."</th>\n";
$i ++;
}
				 
 ?>
			  
</tr>
				
				
<?php
$i = 0;//カウンターリセット
					
while( $i != $fir_weekday ){ //１日の曜日まで空白（&nbsp;）で埋める
                echo "\t<td>&nbsp;</td>\n";
                $i ++;
}
				
for( $day=1; checkdate( $now_month, $day, $now_year); $day++){
					
	if( $i > 6){
	$i = 0;
	echo "</tr>\n";
        echo "<tr>\n";
	}
					
	if( $i == 0 ){ //日曜日の文字色
        $style = "#C30";
    }
    else if( $i == 6 ){ //土曜日の文字色
        $style = "#03C";
    }
    else{ //月曜～金曜日の文字色
        $style = "black";
    }
 
    // 今日の日付の場合、背景色追加
    if( $day == $now_day ){
        $style = $style."; background:silver";
    }
					
	echo "\t<td style=\"color:".$style.";\">";
    echo $day ;
	//当日以前の日付は× countの合計値が０なら日付に× １以上あれば○　
	foreach ($pdo->query('select SUM(count) from reserv where date="'.$day.'"') as $row) {
		
	if($now_day>$day){
	echo '<p class="but">×</p>' ;
	}elseif($row['SUM(count)']>0){
	echo '<p class="ok">○</p>' ;
	}else{
	echo '<p class="but">×</p>' ;
	}
	//クリックでポップアップさせたい部分
    echo '<div class="dropdown">' ;
    echo '<button class="dropdown__btn"></button>' ;
    echo '<div class="dropdown__body">' ;
    echo '<ul class="dropdown__list">' ;
	
echo '<form action="reserv-confirm.php" class="table" method="post">';
foreach ($pdo->query('select * from reserv where date="'.$day.'"') as $row) {
		
if ($row['count']==0) {
echo '<li class="dropdown__item"><p class="but">×', $row['time'], '</p></li>';
			
}else {
echo '<li class="dropdown__item"><a class="dropdown__item-link"><p class="ok"><input type="submit" name="counter" value="', $row['id'], '">○', $row['time'], '</p></a></li>' ;
		}		
	}	
　　　echo '</form>';
　　　echo "\n";  
    echo '</ul>' ;
    echo '</div>' ;
    echo '</div>' ;
		}		
	echo"</td>\n";				
	$i++;
	}				
	while( $i < 7 ){
	echo "\t<td>&nbsp;</td>\n";
	$i++;
	}			
	?>    
</tbody>			
</table>		
</div>
</div>
```

```css
.dropdown {
  margin: 0 0 0 auto;
  position: relative;
}
.dropdown__btn {
  display: block;
  width: 1.5em;
  padding: 0.2em;
  background: none;
  border: 0;
}
.dropdown__btn.is-open::after {
  content: "";
  width: 100%;
  height: 100%;
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.dropdown__btn.is-open + .dropdown__body {
  display: block;
  z-index: 5;
}
.dropdown__body {
  display: none;
  width: 250px;
  background: #fff;
  box-shadow: 0 2px 6px 2px rgba(60,64,67,0.149), 0 1px 2px 0 rgba(60,64,67,0.302);
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  top: 32px;
  left: 0;
}
.dropdown__list {
  margin: 0;
  padding: 0;
}
.dropdown__item {
  display: block;
}
.dropdown__item-link {
  display: block;
  padding: 1em 1.2em;
  font-size: 0.95em;
  text-decoration: none;
  color: #444;
}
.dropdown__item-link:hover {
  background: #CCFFFB;
}
```

php js カレンダーの日付をクリックして時間を選ぶポップアップを表示させたい

### モーダルウィンドウを閉じた時にトップへスクロールしてしまう(トップへ戻ってしまう) 

モーダルウィンドウを閉じた時にトップへスクロールしてしまいます。(トップへ戻ってしまう) 
閉じた時も、スクロールせずに開いた位置で閉じるようにしたいです。

### 該当のソースコード

```HTML
<a href="#" class="js-modal-open" data-target="modal01">
    <div>
       <img src="img/〇〇.jpg" alt="" />
    </div>
    <p>〇〇</p>
</a>
<div id="modal01" class="modal js-modal">
  <div class="modal-bg js-modal-close">
    <div class="modal-content">
       <a href="#" class="js-modal-close">×</a>
       <img src="img/〇〇.jpg" alt="">
    </div>
  </div>
</div>
```
```CSS
*{
  margin: 0;
  padding: 0;
}

.modal{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
}

.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modal-content{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
  height: 80%;
  width: 80%;
  border-radius: 10px;
  background: #fff;
  padding: 40px;
}

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
```
```jQuery
// モーダルウィンドウを開く
$('.js-modal-open').on('click', function(){
  var target = $(this).data('target');
  var modal = document.getElementById(target);
  scrollPosition = $(window).scrollTop();
  $('body').addClass('fixed').css({'top': -scrollPosition});

  $(modal).fadeIn();
  return false;
});

// モーダルウィンドウを閉じる
$('.js-modal-close').on('click', function(){
  $('body').removeClass('fixed');
  window.scrollTo( 0,{'top': -scrollPosition} );

  $('.js-modal').fadeOut();
});
```

### 試したこと
①ポップアップにfixedというクラス名を付与し、スクロール位置取得、その場で固定
②閉じるをクリックした際に、fixedクラスを取り、再度スクロール位置取得、該当箇所までスクロール

この手順でうまくいくと思ったのですが、できませんでした。
window.scrollTo( 0,{'top': -scrollPosition} );で閉じた時もスクロールした分の位置までスクロールしてくれると思ったのですが、トップへ戻ってしまいました。

var target = $(this).data('target');
var modal = document.getElementById(target);
上記の記述があるのは、ページ内に複数のモーダルを設置しているからです。

もう4日ほど悩み、心が折れそうなので、どなたかご教授頂けますと幸いです。宜しくお願いします。

モーダルウィンドウ(ポップアップ)を閉じた時にトップまでスクロールしてしまう

### 前提・実現したいこと



```
Chromeを使用しています。
縦長のWebサイトのキャプチャを一気に撮影する拡張機能はありますが、
キャプチャをモーダルやポップアップも同じように一気に撮影することは可能でしょうか。
撮影したいサイトの中には、スクロールが必要なモーダルやポップアップもあります。

＜例えばこのページのモーダル＞
https://www.lifenet-seimei.co.jp/plan/

```

### 試したこと

デベロッパーツール>ctrl+shift+P>「capture node screenshot」も試してみましたが、
スクロールが必要なツールチップは、画面で見えている範囲しか撮影ができませんでした。


### 補足情報（FW/ツールのバージョンなど）

Chromeを使用しています。