2

venobox という jQuery用のライブラリを使用してモーダルウィンドウで外部 HTML (同サイト内)をアイフレームで読み込む WEB サイトを制作しています。

モーダルウィンドウを開いた際、背景の右上に × の閉じるボタンが表示されますが、これをモーダルウィンドウ内(枠内右上)に表示する方法と、読み込まれたHTML内に閉じるボタンを設置する方法を教えていただけませんでしょうか。

【追記】
少し質問内容がおかしかったので追記させていただきます。
アイフレームで読み込まれる側に閉じるボタンが設置できれば
閉じるボタンが枠内に表示されることになるので、私の質問はひとつでした。
何卒ご教授の程よろしくお願いいたします。

下記を読み込まれる側のHTMLに設置しただけではタメでした。

<div class="vbox-close">X</div>

Fancyboxで閉じるボタンを設置する場合などを参考に
読み込む側(親)を操作する必要があるようなので読み込まれる側(子)のHTMLにjQueryを読み込んだ上で下記のようにして

<script type="text/javascript">
$('.vbox-close').click(function(){
    parent.$.○○○○○.close();
});</script>

parent以降の部分をvonoboxやcloseVboxなど色々変更してみたのですがダメでした。

4
  • 使ったライブラリの全ソースのヘッダ部以外を、全部コピー&ペーストされていますが、その場合、ライセンスに気をつけてください。ご自身で書かれたコードはありませんか? Commented 2015年2月7日 9:55
  • コメントありがとうございます。 ヘッダ部を含めるとリンクが複数あるので書き込めず、ヘッダ部分を削除して書き込んでしまいました。 私が特にいじった部分はないのですが、コード部分は削除すべきでしょうか。
    – Shinmai
    Commented 2015年2月7日 10:11
  • ヘッダ部分は作者に取って大切なものなので、特にコードの大部分を引用するときは忘れないようにしてください。このプロジェクトの場合、 GitHub にソースコードがホストされているので、全引用せずとも venobox/venobox.js へのリンクで十分です。その上で Shinmai さんご自身の試行過程がわかるようなものを書いてください。 Commented 2015年2月7日 10:28
  • Hiroshi Yamamoto様丁寧にアドバイスいただき、ありがとうございます。ご指摘のようにコード部分を削除し、私の試行過程を記載してみました。
    – Shinmai
    Commented 2015年2月7日 10:42

1 件の回答 1

2

「内側の HTML から parent 参照で ESC キーを打つ 」と、ダイアログが閉じます。

以下の1行:

parent.$("body").trigger( parent.$.Event("keydown", { keyCode: 27 }) );

この方法を含んだサンプルを以下に張ります。

outer.html :

<html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
      <link rel="stylesheet" type="text/css" href="http://lab.veno.it/venobox/venobox/venobox.css" />
      <script src="http://lab.veno.it/venobox/venobox/venobox.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $('.venobox').venobox();
        $('.venobox_custom').venobox({
            framewidth: '100%',
            frameheight: 700,
            border: '10px',
            bgcolor: 'white',
            titleattr: 'data-title',
            numeratio: true,
            infinigall: true
        });
        $("#firstlink").venobox().trigger('click');
      });
    </script>
    </head>
    <body>
      <a class="venobox_custom" data-type="iframe" href="inner.html">Open in iFrame</a>
    </body>
</html>

inner.html :

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
  </head>
<body>
  <div class="vbox-close">X</div>
  <script type="text/javascript">
    $('.vbox-close').click(function(){
      var e = parent.$.Event("keydown", { keyCode: 27 });
      parent.$("body").trigger( e );
    });
  </script>
</body>
</html>

補足: 外部の隙間をなくす方法

以下のように余白をなくせば、内側のコンテンツをいじらなくても結果としてボタンがウィンドウ内に表示されます。

.vbox-content {
  margin: 0px !important;
}

.venoframe {
    padding: 3px !important;
}

$(document).ready(function(){
    $('.venobox').venobox(); 
    $('.venobox_custom').venobox({
        framewidth: '100%',
        frameheight: 700,
        border: '10px',
        bgcolor: 'white',
        titleattr: 'data-title',
        numeratio: true,
        infinigall: true
    });
    $("#firstlink").venobox().trigger('click');
});
.vbox-content {
  margin: 0px !important;
}
.venoframe {
    padding: 3px !important;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
  <link rel="stylesheet" type="text/css" href="http://lab.veno.it/venobox/venobox/venobox.css" />
  <script src="http://lab.veno.it/venobox/venobox/venobox.min.js"></script>
</head>
<body>
  <a class="venobox_custom" data-type="iframe" href="http://www.whitehouse.gov/">Open in iFrame</a>
</body>

5
  • Hiroshi Yamamoto様回答ありがとうございます。 検証用スニペットを実行してみたり、いただいたソースを張り付けてみたりしたのですが、やはり閉じるボタンは読み込む側のHTMLに生成されるようです。 大きな画面などですと、ホワイトハウスのWEBサイト表示部分ではなくブラウザの画面端にボタンが表示されてしまいます。 説明がへたくそで申し訳ないのですが、いただいたサンプルで言うところのホワイトハウスWEBサイトのフッターあたりに閉じるボタンを設置し、記事を読み終わった後、モーダルウィンドウをそのボタンで閉じるというような事がしたいです。 お手数をおかけしておりますが、もし良い方法アドバイスいただけましたら大変たすかります。
    – Shinmai
    Commented 2015年2月7日 10:56
  • 読み込まれる側で表示したいのですね。うーん。「 1. closeVbox() メソッドを外から参照可能にして、 2. iFrame の中の HTML にボタンを注入する必要がある」気がしますが、(1.)のために、 venobox 自体に手を入れないといけないような... Commented 2015年2月7日 11:08
  • そうなんです。Fancyboxやthickboxなどの類似したものは、そのようにしてiFrameの中のHTMLにボタンを設置できているみたいなのですが、今回はどうしてもvenoboxでやらないといけない状態でして... closeVbox() メソッドを外から参照可能にする方法がまったく見当もつかないのですが、恐らく他の類似したものはそれができる仕組みになっているんですね。
    – Shinmai
    Commented 2015年2月7日 11:13
  • はは、以外と簡単にできた。追記します。 Commented 2015年2月7日 11:31
  • うあああ、ありがとうございます。閉じました。 すごい感動です。ご飯が食べれないくらい悩んでいたので本当に助かりました。藁をもすがるで初めて登録したので使い方が良くわかりませんがお礼的なものができるのだと思いますのでクリックします。
    – Shinmai
    Commented 2015年2月7日 11:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。