防止CSS模式滚动到顶部 [英] Prevent CSS Modal from scrolling to top

问题描述

我正在使用CSS模态(没有jQuery，也没有编写代码-多年来没有对源进行响应的人，假设我在那里没有得到响应.我想知道是否存在一种防止其转到页面顶部的方法.

I am using a CSS Modal (no jQuery and I didn't write the code - person that did hasn't responded to source in years, assuming I won't get a response there. I wish to know if there is a way to prevent it from going to the top of the page.

<style type="text/css">
.modalDialog<?php echo $photoID; ?> {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog<?php echo $photoID; ?>:target {
opacity:1;
pointer-events: auto;
}

.modalDialog<?php echo $photoID; ?> > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.close<?php echo $photoID; ?> {
background: #bb0000;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: 4px;
text-align: center;
top: 4px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close<?php echo $photoID; ?>:hover { background: #00d9ff; }
</style>

<div id="openModal<?php echo $photoID; ?>" class="modalDialog<?php echo     $photoID; ?>">
<div>
<a href="#close" title="Close" class="close<?php echo $photoID; ?>">X</a>
    <h2>Modal Box</h2>
    <img src="/images/<?php echo $memberID.'/'.$album.'/'.$photo; ?>">  </center><p style=\"text-align:center\"><?php echo $description; ?></p></p>
</div>
</div>

非常感谢您的帮助.谢谢您，复活节快乐！ :)

Much help is greatly appreciated. Thank you and have a Happy Easter! :)

推荐答案

如果不查看其余代码，我怀疑此行为是由点击来源中的href="#"属性引起的.您可以尝试删除标签，但可以对其进行样式设置，使其具有cursor: pointer和其他样式，从而使用户可以点击.您可以为此使用CSS类(即可点击").

Without looking at the rest of your code, I suspect this behaviour is caused by an href="#" attribrute in the click origin. You could try and remove the tag but style it so it has a cursor: pointer and other styling that makes it look clickable to the user. You could use a css class (i.e. 'clickable') for that.

也许您可以提供一些有关如何设置布局以及何时发生此行为的信息，以便我们提供更有效的帮助.

perhaps you can provide some information on how your layout is setup and when this behaviour occurs exactly, so we can offer more effective help.

这篇关于防止CSS模式滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！