- ベストアンサー
DIVで同一ページ内にポップアップ可能か？
- 普通ポップアップをするときには別ウィンドウを立ち上げますが、DIVを使ってリンク元があるhtmlに別のhtmlを立ち上げることは可能でしょうか？画像のポップアップを同一ページに立ち上げるポップアップは既に手元にあります。それを立ち上げるのを画像ではなくhtmlにしたいんです。
- JavaScriptを使用して、DIV要素を使った同一ページ内のポップアップを実現することが可能です。具体的には、ポップアップするHTMLコンテンツをDIVで囲み、そのDIV要素の表示・非表示を制御するJavaScript関数を作成します。
- ポップアップの表示は、指定したDIV要素のvisibilityプロパティを'visible'に設定することで行われます。ポップアップを閉じる際には、visibilityプロパティを'hidden'に設定します。また、ポップアップ内のコンテンツを切り替える場合は、JavaScriptを使用して要素の内容を変更します。
- ky_riku
- お礼率50% (3/6)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんばんわぁ、Blackwinglsです。 単純に文章を隠したり表示したりすんじゃぁなくて、htmlファイルを読み込んで表示したり隠したりしたいんですよね？ でしたら、既にky_rikuさんが補足に書かれた内容でＯＫですよ。 JavaScriptは殆ど変更ありません。 //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=parent.document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; // var lgPhoto=document.getElementById('lPhoto'); // lgPhoto.src = "img/loading.gif"; } てな感じです。 読み込ませるhtmlファイルは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>PHOTO GALLERY</title> <script SRC="photowin.js"></script> </head> <body style="background-color:#D8DAE1; margin:0px; padding:0px;"> <img src="img/loading.jpg" width="300" height="200" id="lPhoto"><br> <a href="javascript:cls()">閉じる</a> </body> </html> てな感じ 大本は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>PHOTO GALLERY</title> <script SRC="photowin.js"></script> </head> <body style="background-color:#D8DAE1;"> <div id="pWindow" style="position:absolute; top:150px; left:85px; visibility:hidden; z-index:1;"> <iframe src="#" width="400" height="300" scrolling="no" id="lPhoto"> </iframe> </div> <div style="position:absolute; top:100px; left:130px; z-index:0;"> <table border="0" cellspacing="20" cellpadding="0" style="background-color:#F3F5FD; border:1px solid #666;"> <tr> <td> <table border="0" cellspacing="7" cellpadding="0"> <tr> <td><a href="javascript:pwinOpen('1.htm')" onFocus="this.blur()"><img src="img/p01s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('2.htm')" onFocus="this.blur()"><img src="img/p02s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('3.htm')" onFocus="this.blur()"><img src="img/p03s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('4.htm')" onFocus="this.blur()"><img src="img/p04s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('5.htm')" onFocus="this.blur()"><img src="img/p05s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('6.htm')" onFocus="this.blur()"><img src="img/p06s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('7.htm')" onFocus="this.blur()"><img src="img/p07s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('8.htm')" onFocus="this.blur()"><img src="img/p08s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('9.htm')" onFocus="this.blur()"><img src="img/p09s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('10.htm')" onFocus="this.blur()"><img src="img/p10s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('11.htm')" onFocus="this.blur()"><img src="img/p11s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('12.htm')" onFocus="this.blur()"><img src="img/p12s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr> <td><a href="javascript:pwinOpen('13.htm')" onFocus="this.blur()"><img src="img/p13s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('14.htm')" onFocus="this.blur()"><img src="img/p14s.jpg" width="80" height="60" border="0"></a></td> <td><a href="javascript:pwinOpen('15.htm')" onFocus="this.blur()"><img src="img/p15s.jpg" width="80" height="60" border="0"></a></td> </tr> <tr align="center" valign="bottom"> <td height="30" colspan="3"><img src="img/title.gif" width="219" height="15"></td> </tr> </table> </td> </tr> </table> </div> </body> </html> てな感じ 表示位置とかは親要素に対しての相対位置でもいいかも知れないっす。 あとiframeはStyleSheetで適当に装飾すればOKかな。 という事で、殆ど手直しらしい直しはナシなんですが・・・・(^^;) ky_rikuさんの実力をもってすればチョロイかもぉ。 ではでは～☆彡
その他の回答 (1)
- Blackwingls
- ベストアンサー率44% (138/313)
こんばんわぁ、Blackwinglsです。 インラインフレームとかでやってみるのはどうでしょうか？ ではでは～☆ミ
補足
インラインフレームをDIVで囲んでposition:absoluteで絶対配置にしてCSSで非表示にする。 その上でJavaScriptでインラインのDIVを表示させて、htmlをインラインに読み込ませる。 で、またJavaScriptで閉じさせるということですか？？ その場合は、JavaScriptの記述はどうなりますか？？ なんか色々細かくてすいません・・・ CSSなんかはCSSデザインある程度できるまで覚えてきたんだけど、JavaScriptは難しくて・・・・・
お礼
完璧でした。素晴らしいです！！ ありがとうございました！！やっとこれで続きが作れるようになる（笑）