質問

ポップアップブロックにならない別ウインドウの作成法

質問者：php4
投稿日時：2010/02/25 13:23

■やりたいこと
HTMLのリンクをクリックして、小窓を表示し
小窓で入力した値を、HTMLのフォームに挿入し小窓を閉じたい。

小窓は、リンクタグでtarget=_blankやnew Window()などで、
開くのではなく、ポップアップブロックにならない
HTMLのレイヤーを使った具体的なサンプルが載っている
URLはありますでしょうか？

Ajaxを使ったものだとカスマイズが大変そうですが、
やりたいことが満たせれば構いません。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2ベストアンサー20pt

回答者：fujillin
回答日時：2010/02/25 17:48

簡単にやるなら、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>

この回答へのお礼

自由にデザインできて良いですね。
また、かっこよいデザインだったので、CSSの勉強になります。
この方法で行こうと思います。ありがとうございました。

通報する

No.1ベストアンサー10pt

回答者：yambejp
回答日時：2010/02/25 14:01

ちょっと面白そうなので考えてみました。
ライブラリを使うともっと簡単にできそうな気もしますが
とりあえずこれで動きます。

<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しかうまくいきませんでしたので、別で質問させていだきますね。

通報する