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}
回答4件
あなたの回答
tips
プレビュー