i use this script to open a modal:
<script type="text/javascript">
$(function(){
$('pose').click(function() {
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissModalClass: 'close',
});
return false;
});
}); </script>
But when i'm at the bottom of the page and click the link, the modal opens at the top of the page. So it looks like nothing happends, but i have to scroll to the top to see the modal opened.
Is it possible to send the user automatically to the top when the modal is opened?
i use this script to open a modal:
<script type="text/javascript">
$(function(){
$('.compose').click(function() {
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissModalClass: 'close',
});
return false;
});
}); </script>
But when i'm at the bottom of the page and click the link, the modal opens at the top of the page. So it looks like nothing happends, but i have to scroll to the top to see the modal opened.
Is it possible to send the user automatically to the top when the modal is opened?
Share Improve this question asked Sep 30, 2013 at 7:27 Rick A.Rick A. 2132 gold badges4 silver badges11 bronze badges 3- Wouldn’t it be a better solution to see to it that the modal opens at the current document position, instead of forcing the page to scroll up so that the user has to go back to the position they were at before afterwards …? – C3roe Commented Sep 30, 2013 at 7:45
- Yes, you are right. But i don't know how to fix that exactly. But that would be an option too. – Rick A. Commented Sep 30, 2013 at 7:55
- Problem fixed! See: Just added the CSS here: jsfiddle.net/mondico/et47L/1 I changed the position: absolute to fixed. That did the job! Thank you! – Rick A. Commented Sep 30, 2013 at 8:02
3 Answers
Reset to default 11use below code to move to top of page:
$('html, body').animate({scrollTop: '0px'}, 0);
Instead of 0, you can have some other value like 500 (its in milliseconds) to make it move to top slowly
You can add position: fixed and for example top: 30px to styles for #popup_bestanden_edit_name. If you do that, modal will appear always in the same place, no matter where the user is on the page. But then you must be careful, because if modal is higher than viewport, you won't be able to see the remaining part of modal.
If you still want to scroll to top (without animation), using JavaScript you can put
$('body').scrollTop(0);
right before your return false;
BTW, if you want to prevent default action of a link to fire, it's a better practice to do it that way:
$('.compose').click(function(event) {
// your code here
event.preventDefault();
}
I would suggest not to scroll to the top of the page. It is not good UX Design! We can have overflow hidden on the body. So, user can not scroll once popup comes to screen. We need to give position fixed to the main element of the popup.
I would suggest to check below snippet.
<html>
<head>
<title>Example</title>
<style type="text/css">
.nooverflow {overflow: hidden;}
.popup {position: fixed; z-index: 99;}
.cover {position: fixed; background: #000; opacity: .5; filter: alpha(opacity=50); top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.popup-conteiner {overflow-y: auto; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 101;}
.popup-block {position: relative; top: 100px; z-index: 101;}
</style>
</head>
<body>
<div id="popup">
<div class="cover"></div>
<div class="popup-conteiner">
<div class="popup-block">
<!-- POPUP's HTML GOES HERE -->
</div>
</div>
</div>
</body>
</html>
But, if it does not work then you can scroll page to the top of the page. You can use solution given by Rajesh as well. I would like to add a condition that if page is already animated then stop before doing new animation.
var htmlBody = $("html,body"),
top = 0;
if (htmlBody.is(':animated')) {
htmlBody.stop(true, true); //Need to stop if it is already being animated
}
htmlBody.animate({ scrollTop: top }, 1000); //Scroll to the top of the page by animating for 1 sec.