6097


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

  * venobox <http://lab.veno.it/venobox/>

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

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

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

[code]

    <div class="vbox-close">X</div>
    
[/code]

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

[code]

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

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


CC BY-SA 3.0
2015-02-07T06:35:42.133
6087
2015-02-07T11:40:56.413
2015-02-07T11:07:44.260
8129
8129
question
javascript jquery
venobox の閉じるボタンを別の場所に付けたい


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

以下の１行:

[code]

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

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

_outer.html_ :

[code]

    <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>
    
[/code]

_inner.html_ :

[code]

    <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>
    
[/code]

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

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

[code]

    .vbox-content {
      margin: 0px !important;
    }
    
    .venoframe {
        padding: 3px !important;
    }
    
[/code]

[code]

    $(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');
    });
[/code]

[code]

    .vbox-content {
      margin: 0px !important;
    }
    .venoframe {
        padding: 3px !important;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-02-07T10:36:47.820
6097
2015-02-07T11:40:56.413
2015-02-07T11:40:56.413
4978
4978
6087
answer