HTMLでModalを子ウィンドウのように使用したい(modelessのように)

現在の環境として
HTML、javascript、BootStrap5、Vue.js3を使用しています。

※サーバーサイドについてはここで触れません。

自分自身のHTMLと、子ウィンドウとは　データのやりとりがあるため、
BootStrap5のようにHTML中にModalのHTMLを埋め込む感じで使用したいです。

イメージとして、Modalにロックをかけず、自由に移動できる感じのことが子ウィンドウです。

データのやりとり上も、HTML中に埋め込む必要があります。
※別ウィンドウを開いて、そこから情報取得するような方法はありましたが、それは避けたいです、

BootStrap5のリファレンスを見たところそのような機能がなさそうな感じですが。

もしくはBootStrap5以外の子ウィンドウの方法があれば。

曖昧な質問ですみませんが、どなたかご教授お願いします。

(追記)
教えて頂いた方法で試したところ、openを押すとModalは止まっていて、closeは押せるが、Modalをドラッグすると、カーソルに合わせてModalが動いてしまい、Modalのドロップができあない状況です。

(追記)
Vue.js3 + Bootstrap5で組んだ場合

javascript
1<div id="app">
2    <div class="row">
3        <div class="col-md-12">
4            <div class="plane-modal-wrap">
5                <button class="plane-modal-open">open</button>
6            </div>
7        </div>
8    </div>
9
10    <div class="plane-modal">
11        <button class="plane-modal-close">close</button>
12    </div>
13</div>
14
15<script>
16const app = Vue.createApp({
17    data() {
18        return {
19
20        }
21    },
22
23    mounted: function () {
24
25    }
26});
27
28app.mount("#app");
29
30// 処理はVue外に書きました。クラス名の取得程度であればVue内でもいいかも
31// addEventListenerはVue外かな。
32const open = document.getElementsByClassName("plane-modal-open")[0];
33const close = document.getElementsByClassName("plane-modal-close")[0];
34const modal = document.getElementsByClassName("plane-modal")[0];
35const modalWrap = document.getElementsByClassName("plane-modal-wrap")[0];
36
37modalWrap.style.height = window.innerHeight + "px";
38
39open.addEventListener("click", () => {
40    modal.style.display = "block";
41});
42
43close.addEventListener("click", () => {
44    modal.style.display = "";
45});
46
47let mX;
48let mY;
49let dX;
50let dY;
51
52modal.onmousedown = (e) => {
53    // クリック時のマウスカーソルX座標
54    mX = e.pageX;
55    // クリック時のマウスカーソルY座標
56    mY = e.pageY;
57    // クリック時の要素のX位置
58    dX = window.pageXOffset + modal.getBoundingClientRect().left
59    // クリック時の要素のY座標
60    dY = window.pageYOffset + modal.getBoundingClientRect().top
61    document.addEventListener("mousemove", onMouseMove);
62}
63
64const onMouseMove = (e) => {
65    if (e.pageY < 0 || e.pageY > window.innerHeight || e.pageX < 0 || e.pageX > window.innerWidth) {
66        document.removeEventListener("mousemove", onMouseMove);
67    };
68    const modalWidth = modal.clientWidth;
69    const modalHeight = modal.clientHeight;
70    const shiftX = -(mX - e.pageX);
71    const shiftY = -(mY - e.pageY);
72    if (dX + shiftX < 0) {
73        modal.style.left = "0px";
74    } else if (dX + shiftX + modalWidth > window.innerWidth) {
75        modal.style.left = window.innerWidth - modalWidth + "px";
76    } else {
77        modal.style.left = dX + shiftX + "px";
78    }
79    if (dY + shiftY < 0) {
80        modal.style.top = "0px";
81    } else if (dY + shiftY + modalHeight > window.innerHeight) {
82        modal.style.top = window.innerHeight - modalHeight + "px";
83    } else {
84        modal.style.top = dY + shiftY + "px";
85    }
86}
87
88modal.onmouseup = () => {
89    document.removeEventListener("mousemove", onMouseMove);
90}
91</script>

css
1<!-- bodyはbootstrapで使用していると思うので消しました。 -->
2.plane-modal {
3    display: none;
4    width: 500px;
5    height: 400px;
6    border: solid 1px black;
7    position: absolute;
8    z-index: 1;
9    background-color: white;
10    top: calc(50% - 200px);
11    left: calc(50% - 250px);
12}
13
14.plane-modal-wrap {
15    width: 100%;
16    position: relative;
17    overflow: hidden;
18    top: 0;
19    left: 0;
20}
21
22.plane-modal-open {
23    z-index: 0;
24}
25
26.plane-modal-close {
27    float: right;
28}

行動規範の内容に同意します

回答1件

ベストアンサー

要するにモーダルウィンドウをドラッグ＆ドロップ出来るようにしたら良いと解釈しました。
モーダルウィンドウを普通に実装して、ドラッグ＆ドロップで動かせるようにしたら完成です。

Javascript ドラッグ＆ドラッグで検索したら実装方法が出てきます。
専用のライブラリもあるのでそれを使っても良いと思います。

追記:実装例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body {
      width: 100%;
      height: 100vh;
      margin: 0;
    }

    .modal {
      display:none;
      width:500px;
      height:400px;
      border:solid 1px black;
      position: absolute;
      z-index: 1;
      background-color:white;
      top: calc(50% - 200px);
      left: calc(50% - 250px);
    }

    .modalWrap {
      width:100%;
      position: relative;
      overflow: hidden;
      top:0;
      left:0;
    }

    .open {
      z-index: 0;
    }

    .close {
      float: right;
    }

  </style>
</head>

<body>
  <div class="modalWrap">
    <button class="open">open</button>
    <div class="modal">
      <button class="close">close</button>
    </div>
  </div>
  <script>
    const open = document.getElementsByClassName("open")[0];
    const close = document.getElementsByClassName("close")[0];
    const modal = document.getElementsByClassName("modal")[0];
    const modalWrap = document.getElementsByClassName("modalWrap")[0];

    modalWrap.style.height = window.innerHeight + "px";

    open.addEventListener("click", () => {
      modal.style.display = "block";
    });

    close.addEventListener("click", () => {
      modal.style.display = "";
    });

    let mX;
    let mY;
    let dX;
    let dY;

    modal.onmousedown = (e) => {
      // クリック時のマウスカーソルX座標
      mX = e.pageX;
      // クリック時のマウスカーソルY座標
      mY = e.pageY;
      // クリック時の要素のX位置
      dX = window.pageXOffset + modal.getBoundingClientRect().left
      // クリック時の要素のY座標
      dY = window.pageYOffset + modal.getBoundingClientRect().top
      document.addEventListener("mousemove", onMouseMove);
    }


    const onMouseMove = (e) =>{
            if(e.pageY < 0 || e.pageY > window.innerHeight || e.pageX < 0 || e.pageX > window.innerWidth){
        document.removeEventListener("mousemove", onMouseMove);
      };
      const modalWidth = modal.clientWidth;
      const modalHeight = modal.clientHeight;
      const shiftX = -(mX - e.pageX);
      const shiftY = -(mY - e.pageY);
      if(dX + shiftX < 0){
        modal.style.left = "0px";
      } else if (dX + shiftX + modalWidth > window.innerWidth) {
        modal.style.left = window.innerWidth - modalWidth + "px";
      } else {
        modal.style.left = dX + shiftX + "px";
      }
      if(dY + shiftY < 0){
        modal.style.top = "0px";
      } else if(dY + shiftY + modalHeight > window.innerHeight){
        modal.style.top = window.innerHeight - modalHeight + "px";
      } else {
        modal.style.top = dY + shiftY + "px";
      }
    }

    modal.onmouseup = () => {
        document.removeEventListener("mousemove", onMouseMove);
    }

  </script>
</body>

</html>

投稿2021/07/14 04:40

編集2021/07/15 04:50

Jon_do

総合スコア1373

退会済みユーザー

2021/07/14 15:42 編集

コメントありがとうございます。 Bootstrap5のModalでは開いたときにModal外をクリックして閉じないようにする設定はありましたが、ウィンドウがブレてしまうことなど課題はあります。またModalを開いたときに背景が暗く、スクロールバーも消えますし、css等の調整は必要そうなので、モーダルウィンドウを普通に実装して、ドラッグ＆ドロップで動かせるようにしたらというだけでは、完成はできないと考えてます。その他、専用のライブラリはどのようなものがあるでしょうか？

Jon_do

2021/07/15 04:02

>モーダルウィンドウを普通に実装 Bootstrapなどを使わないでの実装という意味。 >専用のライブラリドラッグ＆ドロップのライブラリという意味 https://qiita.com/wktq/items/996fc9e6be284990162d 追記に書いたのは素のJavascriptで実装したものです。

退会済みユーザー

2021/07/15 04:24

モーダルを実装というのはBootStrapを使わないことでしたか、失礼しました。専用のドラッグ＆ドロップライブラリは用途が少し違うような感じがしました。教えて頂いたソースコードを実行してみました、ありがとうございます。モーダルは開き、moveができるようになりましたが、カーソルに合わせてモーダルが移動してしまい、閉じるボタンが押せない状況です。

Jon_do

2021/07/15 04:50

> カーソルに合わせてモーダルが移動してしまい、閉じるボタンが押せない状況ドラッグしてドロップした後に、closeボタンが押せるはずですが、どういう状況でしょうか？例外として画面外までドラッグした場合は、クリックすることでカーソルが外れるようになっていましたが修正しました。

退会済みユーザー

2021/07/15 05:11

追記の方に画面キャプチャを載せさせて頂きました。 open実行後、ドラッグ前はCloseを押せるのですが、ドラッグしてドロップできず、カーソルに合わせてモーダルが移動してしまう状況です。 Google Chromeで実行しています。

Jon_do

2021/07/15 05:52 編集

windows chrome,firefox,edge mac chrome,firefox,safari で正常動作確認しました。タッチデバイスは対応させてません。

退会済みユーザー

2021/07/15 06:08

ごめんなさい、htmlファイル単体で動かすと期待した動作でした。 BootStrap5の環境だと何かと競合しているのかもしれません。調べてはいるのですが。

退会済みユーザー

2021/07/15 06:34

クラス名をすべて変えてみましたが同じ現象でした、もう少し調べてみます。

退会済みユーザー

2021/07/15 06:51

システムにソースを入れる時のBootstrap5中のタグの組み方に問題がありました。クラス名を変えるのとタグの組み方を解決することができました。ありがとうございます。

退会済みユーザー

2021/07/16 02:18

動いているので直さなくて良い部分ですが、onMouseMoveのfunctionを変数に入れず、そのままfunctionとして使用する方法はありますでしょうか？

Jon_do

2021/07/16 02:23

退会済みユーザー

2021/07/16 02:28 編集

文章不足すみません。実は　function onMouseMove(e) {　ですでに試していたのですが、動きませんでした。その他の該当箇所も　onMouseMove(e)　とはしたのですが。

Jon_do

2021/07/16 02:36

恐らく、上のコードそのままを書き換えたのではなく、自作ページなどに埋め込んだ形だと思います。既に別の関数onMouseMoveが組み込まれている為、動かないのだと思われます。 onMouseMoveではなくtesttestなど別の名前にしたら動くかと思います。ちなみに最初の書き方は定数にいれた書き方です。こちらのほうが、関数名の被りなど起こらないので推奨している人が多いイメージがあります。

退会済みユーザー

2021/07/16 04:22 編集

失礼しましたが、頂いたコードは埋め込まずに、そのまま単独で実行しています。埋め込みの問題がでてしまうため、まずは、そのまま単独で実行しています。関数名の被りの方を見てみます。定数に入れる方が推奨なんですね！

退会済みユーザー

2021/07/16 04:26

その他の該当箇所は　onMouseMove(e)　でなく、onMouseMoveだと動くようです。そうなると変数にfunctionを入れたほうがよいのかもしれません

行動規範の内容に同意します