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.

Please download the example file and see how you can easily create the popup.