Question

我有一个弹出窗口，当我点击一个链接时，我想要一个关闭按钮而不是点击屏幕。我实现了所谓的关闭按钮，除了在调整屏幕大小时我无法保持静止。我希望它留在弹出窗口的右上角，一半到一半。

我已经尝试过将它移到div内外，但是如果我把它移到里面，如果我尝试将它定位为“半开一半”就会被切断

我附上了我试图获取它的屏幕截图。 http://imgur.com/DbZljrJ.jpg

<p><a class="show-popup" href="#">TBLO (Tibial Plateau Leveling Osteotomy)</a></p>

<div class="overlay-bg2">
   <div class="close-btn-wrapper">
     <button class="close-btn2"><strong>X</strong></button>
   </div> 
     <div class="overlay-content2">

 <p>CONTENT ENTERED HERE</p>
 <button class="close-btn">Close</button>
</div>
</div>

和CSS

.overlay-bg2 {
z-index: 1801;
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-content2 {
z-index: 1800;
background: #fff;
padding: 1%;
width: 700px;
height: 200px;
overflow:auto;
position: relative;
top: 15%;
left: 30%;
margin: 0 0 0 -10%; /* add negative left margin for half the width to center the div */
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.close-btn-wrapper {
   position:relative;
   width: 400px;
   left:25%;
   z-index: 2001;

    }

.close-btn2 {
cursor: pointer;
border: 1px solid #333;
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);
position: absolute;
top:30px;
right: 180px;
z-index: 2000;
padding: 1% 1%;
}

.close-btn2:hover {
background: #05abe0;
}

和JS（如果重要的话）

$(document).ready(function(){
// 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
$(this).parent().next().show(); //display your popup
});

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

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

});

Answer 1

尝试下面的CSS。我对你的风格做了一些改变，评论了所有的改变。根据需要更改值。这是一个有效的fiddle

使用的CSS：

.overlay-bg2 {
    z-index: 1801;
    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-content2 {
    z-index: 1800;
    background: #fff;
    padding: 1%;
    /* width: 700px; */ /* Removed this and added below code to make the content restrict within the visible area of fiddle.*/
    width:50%;
    height: 200px;
    overflow:auto;
    position: relative;
    top: 15%;
    /* left: 30%; */ /* Remove this line */
    /* margin: 0 0 0 -10%; */ /* add negative left margin for half the width to center the    div */ /* Removed this line and added below to position it in center */
    margin:0 auto;
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.close-btn-wrapper {
    position:relative;
    /* width: 400px; */ /* Removed this line and added below */
    width: 50%; /* Make the width of this block same as the width of content block */
    /* left:25%; */ /* Remove this line */
    top: 15%; /* Add this value same as the top value of content block */
    z-index: 2001;
    margin: 0 auto;
    padding:1%; /* Added this line */
}

.close-btn2 {
    cursor: pointer; 
    border: 1px solid #333;
    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);
    position: absolute;
    /* top:30px; */ /* Changed the value to below */
    top:0;
    /* right: 180px; */ /* Changed the value to below */
    right: -8px;
    z-index: 2000;
    padding: 1%;
    margin:0;
}

.close-btn2:hover {
    background: #05abe0;
}

调整窗口大小时，不希望“关闭”按钮移动

1 个答案: