常連

### やりたいこと
下図青丸のように、コードを入力したら、ポップアップで予測変換ウインドウを出したいです。

![イメージ説明](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 で予測変換？ポップアップ？補完？を出したい！

### 実現したいこと
jsを使用してLPなどのサイト離脱を防止するモーダルを作成しています。
以下の条件が付いたモーダルを作りたいのですが上手くいきません。
1.外部ドメインへの遷移時にのみモーダルを表示
2.同一ドメイン内でのブラウザバックは除く
3.ブラウザバック2回目でモーダルウィンドウが消え、別ドメインへ遷移する
4.ページ内リンクには反応しないようにしたい

### 発生している問題・分からないこと
上記の条件中、1.2.3はできていると思うのですが、、
4.のページ内リンクのaタグをクリックしてもモーダルが表示される状態です。



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

```jQuery
$(function(){
    // 外部ドメインへの遷移時にのみモーダルを表示
    $(document).on('click', 'a', function(e) {
        var href = $(this).attr('href');

        // リンクがページ内移動または内部リンクの場合は通常の動作を行う
        if (!href || href.startsWith('#') || href.indexOf(window.location.hostname) !== -1) {
            return;
        }

        e.preventDefault();
        jQuery('.js-modal').fadeIn();
        history.pushState(null, null, null);
    });

    // モーダルの外側をクリックした場合に、モーダルを閉じるクリックイベントを追加
    jQuery('.modal__bg').on('click', function(e) {
        // モーダル自体のクリックを無視
        if (e.target === this) {
            closeModal();
        }
    });

    // popstate イベントを監視して、モーダルを表示する
    var modalShown = false;
    window.addEventListener('popstate', function() {
        if (!modalShown) {
            jQuery('.js-modal').fadeIn();
            modalShown = true;
        } else {
            window.location.href = document.referrer;
        }
    });

    // Safari用に修正したコード
    window.addEventListener('hashchange', function() {
        if (location.hash === '#modal') {
            jQuery('.js-modal').fadeIn();
            history.pushState(null, null, null);
        }
    });

    jQuery('.js-modal-close').on('click', function() {
        closeModal();
        return false;
    });

    function closeModal() {
        jQuery('.js-modal').fadeOut();
        history.replaceState(null, null, window.location.href);
    }
});

```

```html
 <div class="id_wdp_border"></div>
  <div class="modal js-modal">
      <div class="modal__bg js-modal-close"></div>
      <div class="modal__content">
        <div class="modal__box">
          <a class="js-modal-close peke" href=""></a>
        </div>

      </div>
  </div>
```

```css
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  z-index: 99999;
}
.modal__bg{
  background: rgba(0,0,0,0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
    background: #000c27;
    border-radius: 11px;
    left: 50%;
    padding: 15px 9px 9px 9px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    max-width: 320px;
}
.modal__box{
  background-color: #f2f2f2;
  border-radius : 0px 0px 5px 5px;
}
.peke{
  position: fixed;
  right: -41px;
    top: -16px;
  transform: translate(-50%, -50%);
  color: #fff;
  cursor: pointer;
  opacity: 1;
  width: 40px;
  height: 40px;
  border-radius: 100%;
 background: rgba(0,0,0,0.5);
}
.peke::before{
  display: block;
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    -webkit-transform:translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);

}
.peke::after{
  display: block;
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

```

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

##### 上記の詳細・結果
teratailやgoogle等で検索して、添付のコードまで修正できましたが、行き詰ってしまいました。

### 補足
特になし

離脱防止モーダルに条件を追加したい

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

モーダルやポップアップも丸ごとキャプチャを撮りたい

### モーダルウィンドウを閉じた時にトップへスクロールしてしまう(トップへ戻ってしまう) 

モーダルウィンドウを閉じた時にトップへスクロールしてしまいます。(トップへ戻ってしまう) 
閉じた時も、スクロールせずに開いた位置で閉じるようにしたいです。

### 該当のソースコード

```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日ほど悩み、心が折れそうなので、どなたかご教授頂けますと幸いです。宜しくお願いします。

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

こんにちは、プログラミング初心者で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でポップアップが閉じられない

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）

ポップアップの確認ダイアログと、別のメソッドがうまくいきません

現在、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"」にした場合も同じでした。


ここにより詳細な情報を記載してください。