- ベストアンサー
ポップアップブロックにならない別ウインドウの作成法
■やりたいこと 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しかうまくいきませんでしたので、別で質問させていだきますね。
関連するQ&A
- ポップアップウインドウ
＊PCについてですが、初心者なので説明が分かり難いところがあるかもしれません。 ポップアップウインドウは小窓で広告等が出てくるものだと思っています。 最近、Atokの更新とiTunesをインストールしました。その後、yahooや楽天オークション、mixiの一部に左右どちらかの下から小窓で宣伝が出てきます。とても邪魔です。悪意のないものなのでポップアップウインドウブロックには引っかからないのかな？と思いますが、高レベルでブロックしています。 このおかげで、gmailなどリンクできるアドレスを押しても、ポップアップウインドウブロックしているので開けません。と言う表示が出ます。 1.ポップアップウインドウとサイトリンクの意味をはき違えているのでしょうか？私的には、逆なのではないかと思いますが？ 2.悪意のないポップアップウインドウ(広告用）を出させないようにすることはできますか？サイト開いとゆっくりヌーッと出てくるので、読んでいるところを隠されていらいらします。 ツールバーを変えてみたりしましたが、同じ状態なので質問をさせていただきました。
- 締切済み
- ネットワーク
- FLASHで別ウィンドウを_blankで表示させようとすると、ポップアップブロックが作動する
FLASHで別ウィンドウを_blankで表示させようとすると、ポップアップブロックが作動します。 これを回避する方法はあるのでしょうか？ 以下を試してみて、ほぼ上手くいったのですが、こんどはスクロールバーが表示されません。 on (release) { getURL("javascript:void(window.open('表示したいURL','_blank','width=xxx,height=xxx'));"); }
- ベストアンサー
- Flash
- ポップアップのHTMLの記述
リンクの設定で分からない点があります。 <A HREF="http://..." target="_blank">リンク先</A> これで「リンク先」ページがポップアップで開きますが、開くウィンドウの： 1. 大きさを指定するにはどのようにHTMLを記述するのでしょうか。 2.「ボタンバー」「アドレスバー」「お気に入りバー」「ステータスバー」「エクスプローラーバー」が出ないよう設定するにはどのようにHTMLを記述するのでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- ポップアップウインド（小窓）の作成法
よろしくお願いします。 HTMLをまずもっと勉強してよ！っていうご指摘をいただいちゃうかもしれませんが、あえて質問させてください。 メールの文章から、ちょっとしたカードの画像だけをリンクで見せたいと思っています。jpgで私が持っているサイトの下層にアップロードするんですが、大きな画面に小さな画像がひとつ…っていう悲しい状態になってしまいます。 ポップアップ（小窓）は、どこかのサイトからのリンクしかできないでしょうか。画像のようなウィンドへ、メールから直接アクセスできるようにするにはどうしたらいいでしょうか。 もし可能なら、タグなど教えてくださいませ。初心者め！というお怒りはごもっともですが、やさしく教えてくださるとうれしいです。よろしくお願いします。
- 締切済み
- その他(Windows)
- 別ウィンドウ target="new"
<a アンカーで 無関連のサイトをリンクする場合に、target="_blank" を利用し 別ウィンドウで開く設定をしていました。 target="new"について、 target="new"は、フレームに利用すると思っていましたし 調べてもそう書いておりました。 でも実際、フレームが無い場合は、別ウィンドウが開くと思います... target="_blank" と target="new" は、 同じ動作をすると思うのですが・・・ 質問 target="_blank" と target="new" 違うのでしょうか？ フレームを利用しない場合に別々に使い分ける事があるのでしょうか？
- ベストアンサー
- HTML
- Ajaxのポップアップサンプル
Ajaxのサンプルを探しています。 写真やtextをクリックすると、コンパクトに小さなポップアップwindowのようなものがでて、「htmlの少ない情報」を見せ、×でスムーズに消える。 そういったサンプルを探しています。 lightboxのように「おおきく、背景が暗くなる」必要はなく、逆に「小さく、背景は変わらない」ほうが良いと思っています。 出来ることなら、ポップアップが出る・消えるの動作が「スムーズ」（連続的に大きさが変わる）だとより良いと考えています。 当方、初心者に毛の生えたようなレベルです。 助けていただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ポップアップ小窓を開いた時に出る注意表示
ＨＰにメールフォームのリンクを貼り、そのフォームをJavaを使用して小窓表示になるように設定しました。 その後色んなＰＣで動作確認した所、セキュリティ設定の問題なのかもしれませんがリンクをクリックすると小窓が出る前に、ツールバーの下に注意表示が出ます。「ポップアップブロック…」「アクティブＸ…」等メッセージはいろいろです。 自分で見る際は、「許可する」でその後出ないように出来たですが、できればどのような環境でもそのような表示を出すことなくクリックすれば単純に小窓が開くようにしたいです。 そういった設定はどうすればよいのでしょうか。 ちなみにhead内に以下のようなタグをいれています。 <script language="Javascript"> <!-- function newwin(){ var win1=window.open('http://○○○.html','newwindow', 'resizable=yes,toolbar=yes,location=no,status=no,menubar=no,scrollbars=yes,width=450,height=450'); } //--> </script> 宜しくお願い致します。
- ベストアンサー
- HTML
- googleMapAPIの吹き出しリンクからポップアップしたい
こんにちは、 今google Map API version2でページを作成しています。 地図の吹き出しの中にはhtmlのソースが使えるのですが、そのリンクをクリックしたときに別ウィンドウをポップアップさせる方法（サイズを固定してポップする方法）はありますか？ ちなみに <div><a href="./hogehoge.html" Target="_blank" >リンク</a></div> はうまくいくのですが、これだとサイズ固定でなく、ポップアップされません。 下記の <div><a href="#" onclick="window.open(\'./hogehoge.html\',\'moviewin\',\'width=500,height=320\');">リンク</a></div> だと、javascriptの中から読んでるからだと思いますが、うまくいきません。 解決法を知っている方、 是非とも宜しく尾根会いいたします。
- ベストアンサー
- AJAX
- javascriptでのポップアップウィンドウが開かなくて困っています＞＜
初歩的な質問ですいません。 <script language="JavaScript"> <!-- function OpenWin(){ win=window.open("sample.html","new","width=100,height=100"); } //--> </script> <a href="javascript:OpenWin()"><img src="img/1.jpg" width="60" height="60" onClick="MM_openBrWindow('sample.html','sample','scrollbars=yes,width=460,height=460')" border="0"></a> 上のスクリプトで下のリンクで開こうとする時に、 どうしても開けません。＞＜ どうしてなのでしょうか！？ どこかが間違えているのでしょうか！？ 誰か助けていただけませんでしょうか；＞＜；；
- ベストアンサー
- JavaScript
- ホームページビルダー13 ポップアップ小窓を設定した際ビジュアルサイト
ホームページビルダー13 ポップアップ小窓を設定した際ビジュアルサイトビューで「リンクされていないHTML」になってしまいます。プレビュー画面ではちゃんと小窓でリンクされていて問題ないのですがビジュアルサイトビューの画面では小窓表示されるHTHLファイルがリンクされていないファイルの方に表示されてしまいます。通常のリンクであればビジュアルサイトビューで確認するとリンクされているファイルの方に表示されページのプレビューアイコンで緑色↑マークが表示されるのですが・・・・そのマークも表示されない状態です。ポップアップ小窓リンクにした際はビジュアルサイトビューで確認した場合リンクされているHTMLの方に表示されないのが通常なのでしょうか？ リンク画像はGIF画像でリンク先HTMLファイルはswfを配置したHTMLファイルになります。 ポップアップ小窓設定参考書はズバテク182です。
- ベストアンサー
- ホームページ作成ソフト
お礼
自由にデザインできて良いですね。 また、かっこよいデザインだったので、CSSの勉強になります。 この方法で行こうと思います。ありがとうございました。