Question

我正在尝试创建一个播放视频的弹出窗口，我想要的是白色背景与.content-wrapper的宽度相同。

这是我的HTML

<div class="wrapper">
<div class="content-wrapper">
    <div class="mini-videos">
        <ul>
            <li><a class="show-popup" href="#"><img src="http://s25.postimg.org/6uybo33hr/video.jpg"></a>

            </li>
        </ul>
        <div class="clearboth"></div>
    </div>
</div>
</div>
</div>
<div class="overlay-bg">
<div class="overlay-content">
    <p>
        <embed id="movie_player" allowfullscreen="true" bgcolor="#000000" allowscriptaccess="always" flashvars="dclk=true&no_afv_instream=1&authuser=0&loeid=941281%2C936119%2C902550&iv_invideo_url=http%3A%2F%2Fwww.youtube.com%2Fannotations_invideo%3Fcap_hist%3D1%26plid%3DAATzXXYifNOkqDL7%26video_id%3D_02E4xgoLY4&mpvid=AATzXXYjPoYQ6sku&ad_slots=0&hl=en&title=Funniest%20Banned%20Comercials%202013&afv_instream_max=20000&account_playback_token=QK34hPeTEyR5x_TNhEJsJTnCgEd8MTM5MzU2OTA0NkAxMzkzNDgyNjQ2&ad_host=ca-host-pub-8441233777471037&video_id=_02E4xgoLY4&ad_video_pub_id=ca-pub-6219811747049371&eventid=ltsOU8yBEujYiwa...DCollegeHumor%26session_data%3Dfeature%253Dendscreen%26id%3D_GREWc_iJEY&ytfocEnabled=1&iv3_module=1&pyv_ad_channels=afv_user_yesfunnyyes%2Bafv_user_id_jmG9pnCGCeird0UU0pQhBA%2Byt_mpvid_AATzXXYjPoYQ6sku%2Byt_cid_3100393%2Bytdevice_1&gut_tag=%2F4061%2Fytpwatch%2Fmain_3100393&ptchn=jmG9pnCGCeird0UU0pQhBA&c=WEB&pyv_in_related_cafe_experiment_id=&sffb=true&length_seconds=299&watch_ajax_token=WMKcOU_7gxiFtfHNGfJL5_M8OjJ8MTM5MzU2OTA0NkAxMzkzNDgyNjQ2&cbr=Firefox&sourceid=ys&q=funny&ad_device=1&midroll_freqcap=270" name="movie_player" src="http://s.ytimg.com/yts/swfbin/player-vflyJCJXc/watch_as3.swf" type="application/x-shockwave-flash">
        <noembed>
            <div class="yt-alert yt-alert-default yt-alert-error yt-alert-player">
                <div class="yt-alert-icon">
                    <img src="http://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="icon master-sprite" alt="Alert icon">
                </div>
                <div class="yt-alert-buttons"></div>
                <div class="yt-alert-content" role="alert"> <span class="yt-alert-vertical-trick"></span> 

                    </div>
                </div>
            </div>
        </noembed>
    </p>
    <button class="close-btn">Close</button>
</div>
</div>

这是我的jquery

// show popup when you click on the link
$('.show-popup').click(function (event) {
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('.overlay-bg').show(); //display your popup
});

// hide popup when user clicks on close button
$('.close-btn').click(function () {
$('.overlay-bg').hide(); // hide the overlay
});

// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function () {
$('.overlay-bg').hide();
});
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function () {
return false;
});

这是我的css

.wrapper {
background: none repeat scroll 0 0 #3D3D3E;
height: 100%;
width: 100%;
}
.content-wrapper {
background: blue;
margin: 0 auto;
width: 80%;
}
.clearboth {
clear: both;
}
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main-content {
height: 800px;
width: 1000px;
margin: 0 auto;
}
.overlay-bg {
display: none;
position: fixed;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
background: #000;
/* fallback */
background: rgba(0, 0, 0, 0.75);
}
.overlay-content {
background: none repeat scroll 0 0 #FFFFFF;
cursor: default;
left: 30%;
margin: 0 0 0 -20%;
padding: 1%;
position: relative;
top: 15%;
width: 80%;
}
.close-btn {
cursor: pointer;
border: 1px solid #333;
padding: 2% 5%;
background: #a9e7f9;
/* fallback */
background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9e7f9), color-stop(4%, #77d3ef), color-stop(100%, #05abe0));
background: -webkit-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -o-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -ms-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: linear-gradient(to bottom, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.close-btn:hover {
background: #05abe0;
}

以下是jsfiddle的链接：JSFiddle

Answer 1

您可以简单地将弹出窗口放在div中，然后通过jquery访问父宽度/高度。

    $('#popup').width($('#popup').parent().width());
    $('#popup').height($('#popup').parent().height());
    $('#popup').show();

Have a look at this Fiddle

Answer 2

您可以使用jquery ..将内容包装器宽度应用于overlay-bg ..

$( ".overlay-bg" ).css("width",$( ".content-wrapper" ).width());

如何将弹出窗口附加到div

2 个答案: