0

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! :)

Donald Faulknor
  • 63
  • 9
  • For the `.modalDialog` the `top` is set to 0 and hence its always stays at top with fixed position. – anpsmn Apr 05 '15 at 15:27
  • Ok. Thanks. I'll try working with that. – Donald Faulknor Apr 05 '15 at 15:39
  • It appears the `.modalDialog` that has top in it is for the background. `.modalDialog > div` is for the box itself. I wish to make it so the dialog stays in the same position where the screen is when the link is clicked. So they don't have to keep scrolling back down to their current position on the page. – Donald Faulknor Apr 05 '15 at 15:44

1 Answers1

0

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.

Edit: 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.

arothuis
  • 158
  • 10