常連

### 実現したいこと
参考サイトをダウンロードし、まるっとコピーしようとしております。
[参考サイト](https://ultratime.info/kabudekatsu_taboo2/index.php?code=kabu)
その中で、ポップアップの動作がうまく実装できずにいて困っております。
[設置したテスト環境](https://silverbeaver8.sakura.ne.jp/test_lp/others/240610_test/test.html)
参考サイトのように、戻る動作をした時のみ回りながら表示させたいです。

### 発生している問題・分からないこと
最初は非表示のポップアップが最初から表示されてしまっています。
また動作を管理しているjavascriptが特定できていない状態です。



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

```html
   

<div id="cv-tech-common-script" style="display: none;"><iframe id="cv-tech-common-script-iframe" src="./test_files/syncdata.html" name="53633723" frameborder="0" width="100%" height="100%" scrolling="no" loading="eager"></iframe></div><deepl-input-controller><template shadowrootmode="open"><link rel="stylesheet" href="chrome-extension://cofdbpoegempjloogbagkncekinflcnj/build/content.css"><div dir="ltr"><div class="dl-input-translation-container svelte-95aucy"><div></div></div></div></template></deepl-input-controller><script type="text/javascript" src="chrome-extension://cjfdbemmaeeohgibnhdhlakiahifjjcf/injected.js"></script><div class="ue-sidebar-container"><iframe src="./test_files/saved_resource.html"></iframe></div><div class="cv-tech-fancybox-placeholder" style="display: none;"></div><div id="cv-tech-modal-bg" style="background-color: rgba(0, 0, 0, 0.5); display: block;"></div><div class="cv-tech-fancybox-wrap cv-tech-fancybox-desktop cv-tech-fancybox-type-inline cv-tech-newspaper cv-tech-newspaper-transitions cv-tech-modal-show cv-tech-fancybox-opened" tabindex="-1" style="width: 500px; height: auto; position: fixed; top: 0px; left: 0px; transform-origin: 894px 434.5px; overflow: visible;"><div class="cv-tech-fancybox-skin" style="padding: 0px; width: auto; height: auto;"><div class="cv-tech-fancybox-outer"><div class="cv-tech-fancybox-inner" style="overflow: visible; width: 0px; height: 0px;"><div id="cv-tech-modal-main-top" data-cv-tech-fancybox-type="inline" style="display: block;"><div id="cv-tech-modal-main" style="width: 500px; height: 500px; left: 644px; top: 184.5px; position: relative; display: block;"><div id="cv-tech-modal-close-contents"><div id="cv-tech-modal-close" style="border-radius: 30px; border: 2px solid rgb(254, 254, 254); box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 2px; width: 30px; height: 30px; margin: 0px 0px 0px 464px; cursor: pointer; background-color: rgba(0, 0, 0, 0.5);"><p style="height: 1em !important; width: 1em !important; display: table-cell !important; vertical-align: middle !important; text-align: center !important; margin: 0px !important; padding: 0px !important; font-size: large !important; color: rgb(255, 255, 255) !important; line-height: 0 !important;">×</p></div></div><div id="cv-tech-modal-contents" style="width: 500px; height: 500px; margin: 0px;"><iframe id="cv-tech-contents-iframe" src="./test_files/adpage.html" name="65884233" frameborder="0" scrolling="no" style="display: block !important; max-width: 100% !important; width: 500px !important; height: 500px !important;" loading="eager"></iframe></div></div></div></div></div></div></div><div class="cv-tech-fancybox-overlay cv-tech-fancybox-overlay-fixed" style="width: auto; height: auto; display: block;"></div>
```

```html
<!DOCTYPE html>

<html lang="jp"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="cvtech_iframe_srcurl" content="https://ultratime.info">
        
        <meta name="robots" content="noindex">
        <meta name="robots" content="nofollow">

        
    <title>AdPage</title>

        <script type="text/javascript" src="./adpage.js"></script><link rel="stylesheet" href="./modal.css"><link rel="stylesheet" href="./jquery.fancybox.css"><script type="text/javascript" src="./jquery.min(1).js"></script>
    </head>
    <body style="margin: 0;">

        
        
        

    <div id="ads-container" img_width="500" img_height="500" style="position: absolute; display: table; width: 100%; height: 100%;">
<div id="ads-container-cell" style="display: table-cell; width: auto; height: auto; text-align: center; vertical-align: middle;">
  <a target="_top" style="text-decoration: none; color: initial;" href="https://lin.ee/d3HmUA0" href_altlink="">
          <img id="ads-banner-img" border-style="none" width="100vw" height="100vh" style="width: 100vw; height: 100vh; vertical-align: bottom;" src="./popup.png" alt="希望の風">
</a></div></div>

    


</body></html>
```

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

##### 上記の詳細・結果
ポップアップが非表示になりましたが、表示までは行きついておらず、元の状態よりも悪化してしまったため元に戻しました。
[リンク内容](https://silverbeaver8.sakura.ne.jp/test_lp/others/240610_base/index.html)
その他chatGPTを参考にしましたが、解決には至っておりません。

### 補足
特になし

ポップアップを参考サイトのように動作させたい

### モーダルウィンドウを閉じた時にトップへスクロールしてしまう(トップへ戻ってしまう) 

モーダルウィンドウを閉じた時にトップへスクロールしてしまいます。(トップへ戻ってしまう) 
閉じた時も、スクロールせずに開いた位置で閉じるようにしたいです。

### 該当のソースコード

```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を使用しています。

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

こんにちは、プログラミング初心者で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）

### 実現したいこと
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等で検索して、添付のコードまで修正できましたが、行き詰ってしまいました。

### 補足
特になし

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

### 前提・実現したいこと
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」を使用して、動画をポップアップ・自動再生したい

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