单击一个我想要关闭按钮而不是关闭屏幕的链接时,出现一个弹出窗口。
我实现了所说的关闭按钮,只是在调整屏幕大小时无法让它保持静止。我希望它停留在弹出窗口的右上角,一半打开一半关闭。
我曾尝试将其在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;
});
});
最佳答案
试试下面的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;
}