- ベストアンサー
ポップアップブロックにならない別ウインドウの作成法
■やりたいこと HTMLのリンクをクリックして、小窓を表示し 小窓で入力した値を、HTMLのフォームに挿入し小窓を閉じたい。 小窓は、リンクタグでtarget=_blankやnew Window()などで、 開くのではなく、ポップアップブロックにならない HTMLのレイヤーを使った具体的なサンプルが載っている URLはありますでしょうか？ Ajaxを使ったものだとカスマイズが大変そうですが、 やりたいことが満たせれば構いません。よろしくお願いします。
- php4
- お礼率42% (373/888)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
簡単にやるなら、window.prompt()だけでもいけそうな気がするけど、味気ないので、好きなレイアウトが可能なようにしてあります。 （<div id="popup">がポップアップのかわりです） 原理は#1様と同様ですが、個々に生成せずに使いまわしています。 最初に表示値を参照するのと、クリアした状態で表示するのとどちらがよいのか不明でしたので、とりあえず参照して表示するようになっています。 A、B、Cにフォーカスするとポップアップもどきが表示されます。 （表示位置を変えたい場合は、スクリプトでpopupの位置を変えてあげればよろしいかと…） ご参考まで。 <html> <head><title>test</title> <style type="text/css"> #popup { width:200px; position:absolute; top:50px; left:200px; background-color:#eee; border:3px ridge #aaf; z-index:5; display:none; } #popup .title { padding:3px 6px; background-color:#bbe; border-bottom:3px ridge #aaf; } #popup .title .button { float:right; border:1px solid #aaa; } #popup .content { clear:right; padding:10px; } #popup .button { cursor:pointer; font-size:80%; background-color:#ccd; } </style> <script type="text/javascript"> function pp(n) { var pop = document.getElementById('popup'); var inp = document.getElementById('inp'); if (typeof(n)!='number') { inp.value = n.value; this.obj = n; pop.style.display = 'block'; inp.focus(); return; } if (n == 1) this.obj.value = inp.value; pop.style.display = 'none'; } </script> </head> <body> <form> <p> A:<input type="text" readonly onfocus="pp(this)"> <p> B:<input type="text" readonly onfocus="pp(this)"> <p> C:<input type="text" readonly onfocus="pp(this)"> </form> <div id="popup"> <div class="title"> <input class="button" type="button" value="x" onclick="pp(3)"> hoge </div> <div class="content"> input prompt<br> <input type="text" value="" id="inp"><br> <input class="button" type="button" value=" OK " onclick="pp(1)"> <input class="button" type="button" value="Cancel" onclick="pp(2)"> </div> </div> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
ちょっと面白そうなので考えてみました。 ライブラリを使うともっと簡単にできそうな気もしますが とりあえずこれで動きます。 <html> <head> <script> function newwin(){ var w=document.getElementById("newwin"); if(w){ w.parentNode.removeChild(w); }else{ var n=document.createElement("div"); var txt=document.createTextNode("hogehoge"); n.appendChild(txt); var e=document.createElement("br"); n.appendChild(e); var e=document.createElement("input"); e.setAttribute("type","text"); e.setAttribute("id","newtext"); n.appendChild(e); var e=document.createElement("br"); n.appendChild(e); var e=document.createElement("input"); e.setAttribute("type","button"); e.setAttribute("value","set"); try{ e.addEventListener ('click',function(event){clickFunc(event)},true); }catch(event){ e.attachEvent('onclick',function(event){clickFunc(event)}); } n.appendChild(e); var e=document.createElement("input"); e.setAttribute("type","button"); e.setAttribute("value","cansel"); try{ e.addEventListener ('click',function(event){newwin()},true); }catch(event){ e.attachEvent('onclick',function(event){newwin()}); } n.appendChild(e); n.setAttribute("id","newwin"); document.getElementsByTagName("body")[0].appendChild(n); } } function clickFunc(event){ var t = (event.srcElement || event.target); document.getElementById("hoge").value=document.getElementById("newtext").value; newwin(); } </script> <style> #newwin{ position: absolute; top: 100px; left: 100px; width:200px; height:200px; background-Color:#ff0000; padding:10px; z-index:2; } </style> </head> <body> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> <input type="text" name="hoge" id="hoge" readonly><br> <input type="button" value="open/close" onclick="newwin()"><br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> </body> </html>
お礼
document.createElementなど知りませんでした。 Javascriptでtry、catchできるなんて驚きです。 また、イベントなど勉強になります。ありがとうございます。 あと、目的に書き忘れてしまったのですが、 テキストフォームで入力した文字列の間に 別窓で入力した文字を挿入したいのですが、 IEしかうまくいきませんでしたので、別で質問させていだきますね。
お礼
自由にデザインできて良いですね。 また、かっこよいデザインだったので、CSSの勉強になります。 この方法で行こうと思います。ありがとうございました。