質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11530questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

htmlでjavascriptを使ったモーダルウィンドウのような物の作成について

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,532

kuroa

score 18

jqueryを使わずにjavascriptのみでモーダルウィンドウを作ろうと考えているのですが
方法がよくわかりません
作ってるものとしての仕様は、ボタンを押すとボタンのすぐ近くorボタンに重なるように出るようにしたいです

ー追記ー
作っているものはチャット画面のひな形です
ソースを最新のものに差し替えました
<問題点>
名前ボタンを押した時に割り込むように表示され、ずれるのをどうにかしたいのと
表示位置の改善

<!DOCTYPE HTML5>
<!--サンプルページ(チャット画面)の作成-->

<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewpoint" content="user-scalable=no">
        <link rel="stylesheet" type="text/css" href="chat_site_Stationery.css">
        <title>サンプルのぺーじ</title>
        <script type="text/javascript" src="chat_site_Stationery.js">
        </script>
    </head>
    <body>
    <!--メイン始まり-->
        <!--チャットのタイトル-->
        <div id="title">
            サンプルのページ
        </div>
        <!--textbox,ボタン類-->
        <div id="button">
            <form name="js" id="input_text">
                <input type="text" id="txtb" value="" style="width:100%;"><br>
                <input type="button" id="say2" value="発言" onclick="talk();"><!--テキストボックス内の文字列を送信-->
                <input type="button" id="name" value="名前" onclick="nameChange();"><!--下ではないだろうか?-->
                <input type="button" value="メニュー" id="menu"><!--未定(友達追加とかになるはず)-->
                <input type="button" value="退出" id="exit_room"><br><!--ルームから出る-->
            </form>
            <div id="nameChanging">
                <div class="nameChange_style">名前の変更</div>
                <form>
                    <input type="text" id="new_name" value="" maxlength='8'><br>
                    <input type="button" id="ok" value="ok!" onclick="closeBox();">
                </form>
            </div>
        </div>
        <!--参加者一覧-->
        <div id="usernames">
            <span>参加者一覧 |</span>
            <!--ここに参加者を取得するスクリプト-->
        </div>
        <!--チャット本体-->
        <div id="chat_log">

        </div>
    </body>
</html>
//say_func
function talk(){
    target = document.getElementById("chat_log");
    target.innerText = document.forms.input_text.txtb.value;
}
//nameChange_func
function nameChange(){
    document.getElementById("nameChanging").style.display="block";
}
function closeBox(){
    document.getElementById("nameChanging").style.display="none";
}
body{
    background:linear-gradient(#fafafa,#87e7fa);
    font-size;20px;
}
div#title{
    background-color:#87cefa;
    margin-bottom:3px;
}
div#usernames{
    width:100%;
    background-color:#f3f3f3;
    border-top:1px solid;
}

/*nameボタンデザイン*/
input#name{
    border-style:solid;
    background-color:#fafafa;
    margin-top:4px;
    /*position:absolute*/
}
/*発言ボタン用*/
input#say2{
    border-style:solid;
    background-color:#fafafa;
    margin-right:4px;
    margin-top:4px;
}
/*メニューボタン用*/
input#menu{
    border-style:solid;
    background-color:#fafafa;
    margin-right:4px;
    margin-top:4px;
}
/*退出ボタン用*/
input#exit_room{
    border-style:solid;
    background-color:#fafafa;
    margin-top:4px;
}

/*モーダルの表示用*/
div#nameChanging{
    display:none;
    border-style:solid;
    border-width:1px;
    background-color:#fafafa;
    width:127px;
    height:80px;
}
/*名前変更のデザイン*/
div.nameChange_style{
    background-color:#87cefa;
    margin-bottom:4px;
}
input#new_name{
    margin-bottom:5px;
    margin-left:2px;
}
input#ok{
    border-style:solid;
    background-color:#fafafa;
    border-style:solid;
    margin-right:5px;
    float:right;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/08/18 09:25

    今作っているものがあれば途中で構いませんのでソースコードと分かっている問題点、エラーコードなどをご提示ください。ないのであればキーワードで検索して作ってみてください。

    キャンセル

  • Lhankor_Mhy

    2017/08/18 21:00

    質問の追記拝読。回答に変更の必要はなさそうなので、提示したページのCSSの部分をお試しください。

    キャンセル

回答 4

+6

HTML 5.2 勧告候補に dialog 要素があります。
現在、Blinkブラウザ(Chrome/Opera)で使えます。
https://www.w3.org/TR/html52/interactive-elements.html#elementdef-dialog
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

z-index に依存せず、最後に開いたのが必ず最前面に来るため簡単です。
さらにMDNの例にあるように、子に<form method="dialog">を置くと入力処理が簡単になります。

 <body>
  <form action="#">
   <div>
    <button type="button" id="openmodal">Open modal dialog</button>
   </div>
  </form>
  <dialog id="dialog1">
   <form method="dialog">
    <section>
     <h2>DIALOG</h2>
     <select name="sweet">
      <option selected="selected">ice</option>
      <option>choco</option>
     </select>
    </section>
    <div class="buttonset">
     <button type="submit" value="ok" id="ok">OK</button>
     <button type="submit" value="cancel" autofocus="autofocus">Cancel</button>
    </div>
   </form>
  </dialog>
  <script>
  document.getElementById('openmodal').addEventListener('click', function(event) {
    let dialog = document.getElementById('dialog1');
    dialog.showModal();
  });

  document.getElementById('ok').addEventListener('click', function(event) {
    document.getElementById('dialog1').close(document.querySelector('[name="sweet"]').value);
  });

  document.getElementById('dialog1').addEventListener('close', function(event) {
    console.log(this.returnValue);
  });
  </script>
 </body>
dialog {
  border-width: thin;
  box-shadow: 4px 2px 2px 0 rgba(0, 0, 0, 0.3);
  min-width: 300px;
}

dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.buttonset {
  display: flex;
  justify-content: space-around;
}

基本的にはこのようになります。
表示位置を変えたい場合はスタイルシートで変更してください。
わかりやすいサイトもあるので参考にどうぞ。

dialog element demo
https://demo.agektmr.com/dialog/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+5

「モーダルウィンドウ」といっても、特別なAPIがあるわけではなくて、

  • ウィンドウ以外の部分を操作できないようにするための、半透明の背景を表示する
  • 狙った場所の最前面に、ウィンドウの中身を表示する

といった、基本的なDOMを積み重ねて行っていくものです。

自分で作るのは結構面倒なので、既存のライブラリを使うのがいいでしょう(jQueryに依存しないものもあります)。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+3

とりあえず基本的なところは↓参考にしてみてください。
初心者でも分かる!モーダルウィンドウの作り方

表示位置の調整については、event.screenXなどの座標を参照するといいかと思います。

 追記

jQueryを使わない書き方については↓が参考になるかと思います。
もうjQueryには頼らない!素のJavaScriptでDOMを操作するための基礎知識 - WPJ

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

ブラウザ特有の本来の意味のモーダルウィンドウはすでに廃止の方向ですから
疑似モーダルになると思います。
処理的にはdialogタグが有力ですが、まだブラウザごとに実装にブレがあるので
多少手厚くjavascriptやcssでハックしてやらないといけません

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11530questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。