venobox の閉じるボタンを別の場所に付けたい

投稿者: Anonymous

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など色々変更してみたのですがダメでした。

解決

「内側の 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;
}

_x000D_

_x000D_

$(document).ready(function(){_x000D_
    $('.venobox').venobox(); _x000D_
    $('.venobox_custom').venobox({_x000D_
        framewidth: '100%',_x000D_
        frameheight: 700,_x000D_
        border: '10px',_x000D_
        bgcolor: 'white',_x000D_
        titleattr: 'data-title',_x000D_
        numeratio: true,_x000D_
        infinigall: true_x000D_
    });_x000D_
    $("#firstlink").venobox().trigger('click');_x000D_
});

_x000D_

.vbox-content {_x000D_
  margin: 0px !important;_x000D_
}_x000D_
.venoframe {_x000D_
    padding: 3px !important;_x000D_
}

_x000D_

<head>_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>_x000D_
  <link rel="stylesheet" type="text/css" href="http://lab.veno.it/venobox/venobox/venobox.css" />_x000D_
  <script src="http://lab.veno.it/venobox/venobox/venobox.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
  <a class="venobox_custom" data-type="iframe" href="http://www.whitehouse.gov/">Open in iFrame</a>_x000D_
</body>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *