通过单击 iframe 打开弹出窗口

Posted 2023-05-09

【中文标题】通过单击 iframe 打开弹出窗口

【英文标题】：Open popup by clicking on iframe

【发布时间】：2018-02-27 20:39:16

【问题描述】：

我想通过点击 iframe 打开弹出窗口。请告诉我 怎么做？

提前致谢。

【参考方案1】：

试试这个..

1) HTML 标记

<a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
    <iframe src="http://player.vimeo.com/video/41135183?portrait=0"   seamless=""></iframe>
</div>

2) JS

// popup examples
$( document ).on( "pagecreate", function() 
    // The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account
    function scale( width, height, padding, border ) 
        var scrWidth = $( window ).width() - 30,
            scrHeight = $( window ).height() - 30,
            ifrPadding = 2 * padding,
            ifrBorder = 2 * border,
            ifrWidth = width + ifrPadding + ifrBorder,
            ifrHeight = height + ifrPadding + ifrBorder,
            h, w;
        if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) 
            w = ifrWidth;
            h = ifrHeight;
         else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) 
            w = scrWidth;
            h = ( scrWidth / ifrWidth ) * ifrHeight;
         else 
            h = scrHeight;
            w = ( scrHeight / ifrHeight ) * ifrWidth;
        
        return 
            'width': w - ( ifrPadding + ifrBorder ),
            'height': h - ( ifrPadding + ifrBorder )
        ;
    ;
    $( ".ui-popup iframe" )
        .attr( "width", 0 )
        .attr( "height", "auto" );
    $( "#popupVideo" ).on(
        popupbeforeposition: function() 
            // call our custom function scale() to get the width and height
            var size = scale( 497, 298, 15, 1 ),
                w = size.width,
                h = size.height;
            $( "#popupVideo iframe" )
                .attr( "width", w )
                .attr( "height", h );
        ,
        popupafterclose: function() 
            $( "#popupVideo iframe" )
                .attr( "width", 0 )
                .attr( "height", 0 );
        
    );
);

3. CSS

iframe 
    border: none;

【讨论】：

对 OP 要求的内容过度杀戮的方式，哈哈。小提琴会很好，也许我会用它：P

谢谢 raghav 但这不是我想要的。单击 iframe（Youtube 视频）后，它会打开弹出窗口（模态）

【参考方案2】：

即使我不应该回答你的问题，因为它缺乏自己的研究，也是可以在 1 分钟内搜索到的东西，但是你去吧：

window.open(url, "name", "options");

Source

【讨论】：

我已经google了，但没有找到任何解决方案，如果你有答案，请告诉我。

你试过我的答案了吗？这将打开一个浏览器的弹出窗口，有点像一个新窗口。我在答案中添加了一个链接以获取更多信息。