ホームページ > ウェブフロントエンド > htmlチュートリアル > 中央に配置された iframe ウィンドウがポップアップし、他の場所をクリックすると消える_html/css_WEB-ITnose

中央に配置された iframe ウィンドウがポップアップし、他の場所をクリックすると消える_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:00:11
オリジナル
1324 人が閲覧しました

1.html

<a class="info_show" href="javascript:;" onclick="detail(22)" >弹出详情</a><br /><iframe id="myFrameId" src="https://www.baidu.com" name="myFrameName" scrolling="no" frameborder="0"></iframe>
ログイン後にコピー

2.css

#myFrameId{	width:800px;	height:600px;	position: absolute;	display:none;}
ログイン後にコピー

3.js

function detail(id){    $('#myFrameId').attr('src','https://www.baidu.com');    $('#myFrameId').show();    iframe_height = $(window).height()-600;    iframe_width = $(document).width()-800;    iframe_height>0?iframe_height=(iframe_height/2):iframe_height=0;    iframe_width>0?iframe_width=(iframe_width/2):iframe_width=0;    $('#myFrameId').css('top',iframe_height);    $('#myFrameId').css('left',iframe_width);}$(document).on("click", function(e){    console.log('123');    $('#myFrameId').hide();});$(".myFrameId,.info_show").on("click", function(e){    console.log('456');    e.stopPropagation();});
ログイン後にコピー


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート