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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

4回答

402閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2017/08/17 13:39

編集2017/08/18 11:32

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

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

html

1<!DOCTYPE HTML5> 2<!--サンプルページ(チャット画面)の作成--> 3 4<html lang="ja"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <meta name="viewpoint" content="user-scalable=no"> 8 <link rel="stylesheet" type="text/css" href="chat_site_Stationery.css"> 9 <title>サンプルのぺーじ</title> 10 <script type="text/javascript" src="chat_site_Stationery.js"> 11 </script> 12 </head> 13 <body> 14 <!--メイン始まり--> 15 <!--チャットのタイトル--> 16 <div id="title"> 17 サンプルのページ 18 </div> 19 <!--textbox,ボタン類--> 20 <div id="button"> 21 <form name="js" id="input_text"> 22 <input type="text" id="txtb" value="" style="width:100%;"><br> 23 <input type="button" id="say2" value="発言" onclick="talk();"><!--テキストボックス内の文字列を送信--> 24 <input type="button" id="name" value="名前" onclick="nameChange();"><!--下ではないだろうか?--> 25 <input type="button" value="メニュー" id="menu"><!--未定(友達追加とかになるはず)--> 26 <input type="button" value="退出" id="exit_room"><br><!--ルームから出る--> 27 </form> 28 <div id="nameChanging"> 29 <div class="nameChange_style">名前の変更</div> 30 <form> 31 <input type="text" id="new_name" value="" maxlength='8'><br> 32 <input type="button" id="ok" value="ok!" onclick="closeBox();"> 33 </form> 34 </div> 35 </div> 36 <!--参加者一覧--> 37 <div id="usernames"> 38 <span>参加者一覧 |</span> 39 <!--ここに参加者を取得するスクリプト--> 40 </div> 41 <!--チャット本体--> 42 <div id="chat_log"> 43 44 </div> 45 </body> 46</html>

js

1//say_func 2function talk(){ 3 target = document.getElementById("chat_log"); 4 target.innerText = document.forms.input_text.txtb.value; 5} 6//nameChange_func 7function nameChange(){ 8 document.getElementById("nameChanging").style.display="block"; 9} 10function closeBox(){ 11 document.getElementById("nameChanging").style.display="none"; 12}

css

1body{ 2 background:linear-gradient(#fafafa,#87e7fa); 3 font-size;20px; 4} 5div#title{ 6 background-color:#87cefa; 7 margin-bottom:3px; 8} 9div#usernames{ 10 width:100%; 11 background-color:#f3f3f3; 12 border-top:1px solid; 13} 14 15/*nameボタンデザイン*/ 16input#name{ 17 border-style:solid; 18 background-color:#fafafa; 19 margin-top:4px; 20 /*position:absolute*/ 21} 22/*発言ボタン用*/ 23input#say2{ 24 border-style:solid; 25 background-color:#fafafa; 26 margin-right:4px; 27 margin-top:4px; 28} 29/*メニューボタン用*/ 30input#menu{ 31 border-style:solid; 32 background-color:#fafafa; 33 margin-right:4px; 34 margin-top:4px; 35} 36/*退出ボタン用*/ 37input#exit_room{ 38 border-style:solid; 39 background-color:#fafafa; 40 margin-top:4px; 41} 42 43/*モーダルの表示用*/ 44div#nameChanging{ 45 display:none; 46 border-style:solid; 47 border-width:1px; 48 background-color:#fafafa; 49 width:127px; 50 height:80px; 51} 52/*名前変更のデザイン*/ 53div.nameChange_style{ 54 background-color:#87cefa; 55 margin-bottom:4px; 56} 57input#new_name{ 58 margin-bottom:5px; 59 margin-left:2px; 60} 61input#ok{ 62 border-style:solid; 63 background-color:#fafafa; 64 border-style:solid; 65 margin-right:5px; 66 float:right; 67}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/08/18 00:25

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

2017/08/18 12:00

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

回答4

0

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">を置くと入力処理が簡単になります。

HTML

1 <body> 2 <form action="#"> 3 <div> 4 <button type="button" id="openmodal">Open modal dialog</button> 5 </div> 6 </form> 7 <dialog id="dialog1"> 8 <form method="dialog"> 9 <section> 10 <h2>DIALOG</h2> 11 <select name="sweet"> 12 <option selected="selected">ice</option> 13 <option>choco</option> 14 </select> 15 </section> 16 <div class="buttonset"> 17 <button type="submit" value="ok" id="ok">OK</button> 18 <button type="submit" value="cancel" autofocus="autofocus">Cancel</button> 19 </div> 20 </form> 21 </dialog> 22 <script> 23 document.getElementById('openmodal').addEventListener('click', function(event) { 24 let dialog = document.getElementById('dialog1'); 25 dialog.showModal(); 26 }); 27 28 document.getElementById('ok').addEventListener('click', function(event) { 29 document.getElementById('dialog1').close(document.querySelector('[name="sweet"]').value); 30 }); 31 32 document.getElementById('dialog1').addEventListener('close', function(event) { 33 console.log(this.returnValue); 34 }); 35 </script> 36 </body>

CSS

1dialog { 2 border-width: thin; 3 box-shadow: 4px 2px 2px 0 rgba(0, 0, 0, 0.3); 4 min-width: 300px; 5} 6 7dialog::backdrop { 8 position: fixed; 9 top: 0; 10 left: 0; 11 right: 0; 12 bottom: 0; 13 background-color: rgba(0, 0, 0, 0.5); 14} 15 16.buttonset { 17 display: flex; 18 justify-content: space-around; 19}

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

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

投稿2017/08/18 01:51

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

投稿2017/08/18 00:26

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

追記

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

投稿2017/08/18 00:35

編集2017/08/18 00:45
Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2017/08/21 03:49

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問