Question

嗨，有谁知道如何制作一个透明的弹出窗口.. 我已经google并找到一些可能对我有用的代码，但它对我不起作用.. 我正在使用cakephp ..

这是html代码

<div id="content">
<button class="popup">Search</button>
</div>
<div id="overlay"></div>
 <div id="popupBox"></div>

这是css

#overlay {
    display:none;
    opacity:0.5;
    background-color:black;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 999;
}
#popupBox {
    display:none;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:600px;
    height: 500px;
    color: #000000;
    border:5px solid #4E93A2;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background-color:#FFFFFF;
    z-index: 1000;
}
#popupContent {
    display:none;
    font-family:Arial, Helvetica, sans-serif;
    color: #4E93A2;
    margin-top:30px;
    margin-left:30px;
    margin-right:30px;
}

这是javascript

$('.popup').click(function () {
    $('#overlay').fadeIn('slow');
    $('#popupBox').fadeIn('slow');
    $('#popupContent').fadeIn('slow');
});

$('#overlay, .deleteMeetingCancel').click(function () {
    $('#overlay').fadeOut('slow');
    $('#popupBox').fadeOut('slow');
    $('#popupContent').fadeOut('slow');
});

$('.deleteMeetingButton').click(function () {
    $('#popupContent').fadeOut('slow');
    $('#deleteMeetingConfirmDeleted').fadeIn('slow');
    $('#overlay').delay(1300).fadeOut('slow');
    $('#popupBox').delay(1300).fadeOut('slow');
    $('#deleteMeetingConfirmDeleted').fadeOut('slow');
});

我在此页面引用http://jsfiddle.net/sGeVT/10

Answer 1

请使背景透明;

喜欢 background-color：transparent;

#popupBox {
    display:none;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:600px;
    height: 500px;
    color: #000000;
    border:5px solid #4E93A2;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background-color:transparent;
    z-index: 1000;
}

cakephp打开透明弹出窗口

1 个答案: