• 締切済み

Ajaxのウィンドウ表示位置について

ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？

noname#33006
noname#33006

みんなの回答

回答No.2

#1です。 関数はbody内でもhead内でも外部ファイルでもどこでも同じです。 #1のソースでtopとleftが取得出来ますので、例えばAjaxで表示させたいdiv要素を"hogehoge"とすると <div id="hogehoge" style="position:absolute;width:500px;height:500px;"></div> <script> document.getElementById("hogehoge").style.top = top+"px";//#1のソースで取得したtop document.getElementById("hogehoge").style.left= left+"px";//#1のソースで取得したleft </script> とすれば中央位置に幅500px,高さ500pxの疑似ウィンドウ（レイヤー）が中心位置に表示されるはずです。 質問者さんが使っているvar win = new Window({......のオブジェクトがどうなっているか分からないので、これ以上は説明出来ません。。。もしclassName要素はあるようですが、ID要素が無いようでしたらオブジェクトが表示されるレイヤーにIDを設定する必要があるかもしれませんね。 参考まで。 とすれば、

noname#33006
質問者

補足

またまたありがとうございます。元のベースは http://e0166.blog89.fc2.com/blog-entry-203.html さんからサンプルソースをダウンロードしたものです。 javascript/window.jsの158行目～171行目のあたりのpx指定が top,leftの値を制御しているのはわかるのですが それ以外はお手上げ状態でした。 ここにウインドウサイズを取得する記述をするといいと思うのですが それができていれば質問はしないですね・・・＾＾；

回答No.1

ウィンドウを中心に表示するには、ウィンドウの幅と高さを取得する必要がありますね。 ウィンドウサイズはIEとその他で違うので、関数を作っておきます。 function getWindowSize(type){ switch(type){ case "w": if(document.all){ return(document.body.clientWidth); }else if(window.innerWidth){ return(window.innerWidth); }else{ return false; } ;break; case "h": if(document.all){ return(document.body.clientHeight); }else if(window.innerHeight){ return(window.innerHeight); }else{ return false; }; break; default: return false; } } これでウィンドウサイズが取得出来ますので、これに合わせてtop、leftを設定すれば良いと思います。中心はそのサイズの 1/2ですし、ウィンドウの左上（top,leftで設定するポイント）はそこから開くウィンドウサイズの1/2をひいたものでしょうから、 var H = 500;//表示するウィンドウの高さ var W = 500;//幅 var top = getWindowSize("h")/2 - H/2; var left = getWindowSize("w")/2 - W/2; これでtopとleftの値を設定すれば良いと思います。

noname#33006
質問者

補足

お返事ありがとうございます＾＾ 応用の仕方がわからないのですがどのようなソースになるのでしょうか？ body内に <script type="text/javascript"> function getWindowSize(type){ switch(type){ case "w": if(document.all){ return(document.body.clientWidth); }else if(window.innerWidth){ return(window.innerWidth); }else{ return false; } ;break; case "h": if(document.all){ return(document.body.clientHeight); }else if(window.innerHeight){ return(window.innerHeight); }else{ return false; }; break; default: return false; } } </script> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", var top = getWindowSize("h")/2 - H/2; var left = getWindowSize("w")/2 - W/2; var W = 500; var H = 500; zIndex: 100, url: "http://www.yahoo.co.jp/", showEffectOptions: {duration:3}}) win.show(); </script> としてみたのですが何も表示されない状態です。お手数お掛けしますが教えて頂けないでしょうか？宜しくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • prototipの設定

    質問させていただきます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/prototip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://yourdomain/prototip.css"> <script type="text/javascript"> function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); Event.observe(window, 'load', init, false); </script> </head> <body> <a href="" id="test">test</a> </body> </html> 以上のように記述して、動かしてみたのですが、動きません。 何処が違っているか解るか炊いたら教えていただけ無いでしょうか。

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • 教えてください!　lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>

  • 日本語記述が出来ません（XML?)

    初めて質問いたします。 海外のホームページテンプレートを購入し、編集しているのですがなぜか日本語表記がされなくて困っています。 CSS部分には問題なさそうなのですが、誰か原因がわかりましたら教えていただけると助かります。 ちなみにfirefoxもIEも同様でした。どうぞ宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>○○○○</title> <meta http-equiv="Content-Type" content="text/html; charset="shift-jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.2.1.js" type="text/javascript"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script src="js/cufon-replace.js" type="text/javascript"></script> <script src="js/Swis721_Th_BT_400.font.js" type="text/javascript" ></script> <!--[if lt IE 7]> <link href="ie_style.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>

  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか　以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • ModalBoxのIEでの表示について

    質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう？ 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか？

  • インラインフレームを使って、lightboxを表示させたい

    メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML（main.html）のheadに下記の記述をし、 【main.html】 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> インラインフレーム内（in.html）のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。

    • ベストアンサー
    • HTML
  • Ajaxとの組み合わせ

    こんばんは、お世話になっております。 http://www.openspc2.org/reibun/Adobe_Spry/widget/tabpanel/001/index.html ロールオーバーなどのjavascriptや、CSSなどで作成された既存のファイルに、上記サイトにあるサンプルを組み込むと、まともに表示されない現象が起こっています。 上記サイトのサンプルでは、１つのリンクをクリックすることで、それに該当するテキストを表示するわけなのですが、全てのテキストが表示されてしまう、といった現象となっております。 既存のファイルと言うのも、javascriptなりCSSなりを、ココ1ヶ月で勉強しながら作ったもので、上記サイトのサンプルを組み込むには？と依頼されたのが事の始まりです。私もjavascriptなりのスキルがなく試行錯誤を繰り返しているものの、上記サンプルが正常に表示されたかとおもうと、既存のロールオーバーが動かなくなったりで、悩んでおります。 ちなみに、現在のソースは、 <link rel="stylesheet" href="SpryTabbedPanels.css" type="text/css" media="all"> <script src="SpryTabbedPanels.js" type="text/javascript"></script> <script type="text/javascript"> <!-- window.onload = function() { new Spry.Widget.TabbedPanels("tabPanel1"); } // --> </script> <script type="text/javascript"> // --> function newImage(arg) { 　・ 　・ 　・ <body onload="preloadImages();"> となっており、ロールオーバーは動くがajaxは機能せず、bodyタグにあるonloadを外すと、ajaxは動くがロールオーバーは機能しない。といった状況です。 スキルが乏しく、どこをどう説明したら良いのかが分からず、上手くお伝えできませんが、ご指摘いただければと思って投函させていただきました。宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する