menu
Ad goes here

Saturday, 6 February 2016

An easy way to show popup from cursor point position?

Popup is one of the easy way to skip lengthy process and give users more comfort to get maximum information. Popups are generally new browsers window but to make user-friendly we recommend to use div based popup so that users can feel they are in the same page.

Today, we are introducing a div base popup which will show in the centre of the page in visible area even its in mobile devices/ responsive mode. We can make it easily by using few lines of CSS and jQuery code.

If you are going to use any framework then well and good, but please make sure that the used frameworks are device friendly. But if you are not going to use any framework then I will recommend to use below code which explained clearly about the drawback and solutions and just you have to choose the right one.

The way of creating perfect popup:
Most of the developers use 'fixed' position with left and right position and it works perfectly in web browsers, but when you will check it in mobile devices then the issue will arrive. If the popup closing button position above the visible area then you never can be able to close the popup and navigate the site.

So I will recommend to use 'absolute' instead of 'fixed' position to avoid this issue, because when you will use absolute then on scroll the page the popup also will be moved with the page and you can navigate whatever you wants even in small devices.

But still have one issue even you are using absolute position, if you access absolute position based popup from the end of lengthy page then used popup may arrived at the top of the page which little difficult for the users to find out the popup until they scroll up to the top of the page area.

So the solution is, you have to open the popup based on your last click event/cursor position.

Here is the complete solutions.

<!doctype html>
<html lang="en">
<title>An easy way to show popup from cursor point position?</title>
<style>
body {morgin:0; padding:0; font-family:Arial; font-size:12px; color:#333}
.win-pos {position:fixed; width:1px; height:1px; top:50%; left:50%;display:block;}
.popup-win { background:#fff; border:#ccc 1px solid; box-shadow:#333 0 0 25px 0; width:450px; height:550px; position:absolute; display:none;}
</style>
</head>
<body>
<div style="height:2000px;">
<center>Click to get the popup and also scroll down and click for better understanding.</center>
<span class="win-pos"></span> <!-- please use it in master page to get the position. -->
<div class="popup-win"></div> <!-- This is for popup area, please use your content inside this. -->
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $("*", document.body).click(function(){ // use your button id or class name
        var pos = $(".win-pos").offset(); //to get position. ***Please use it in html body to get the right position.
  var popupwdth = $(".popup-win").width()/2; //to caculate the popup window size.
        alert("Top position: " + pos.top + " Left position: " + pos.left + " Popup width: " + popupwdth); // remove it after implement the code.
  $('.popup-win').css({top: pos.top, left: pos.left, position:'absolute', margin:-popupwdth, display:'block'});
    });
});
</script>
</body>
</html>



No comments:

Post a Comment

Books for you (Crafted with )