I have actually created a modal pop-up which pops up when someone clicks on an element on my website.
However it always pops up at the top of the page / bottom of the page (where I have inserted the code.) Fixed, also isn't a good solution, as if the modal is long, it cannot be readed.
I basically want it to pop up for example 50px lower than the current window, so it will always pops up to the user, he/she doesn't have to scroll down/up.
Is there any plugin to solve this solution, in jQuery?
Google search for: 'jQuery modal popup' gave me this http://dinbror.dk/bpopup/ – looks exactly like what you need.
Related
I want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).
An example
When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.
Is it handled via javascript - detect the cursor position and change the layout.
Any help would be welcome.
Using document mouseleave and mouseenter you can achieve this.
$(document).on('mouseleave',function(){
$('#test').removeClass('disnone');
}).on('mouseenter',function(){
$('#test').addClass('disnone');
});
FIDDLE DEMO
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.
I saw this post: pop-up div over parent window and the message about yensdesign, which is fine, but it still doesn't "quite" cover what i would want, which is:
At this moment I have two popups. One for when the window closes and the other pops up when the visitor has been on the page for x seconds. Downfall of this is:
1. It's [fill in]-ugly
2. One of them looks like a div, the other like a popup (in firefox), while they look like very simple and ugly popups in other browsers.
So I would like to have the same function, but then with divs, so that they will look nicer and behave appropriately amongst all browsers.
The only stuff I can find has code for closing divs... so could someone help me out please?
Edit: See http://www.cornerstws.com/test.html for the simple javascript solution that I had so far.. (popup appears after 3 sec and the other popup appears when you close the window (or refresh.. not nice either)).
as i understood from ur question that you want a popup that can be triggered through java script function
u can check this blog for a simple popup
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/
and then u can restyle it to meet ur needs and u can use this function
$('#pop').click();
rather than clicking the link to open the popup.
hope this answer helped you
I have an issue with a modal that I programmed. When it is opened or closed, it goes to the top of the page. I want the page background to stay exactly where it is opened and not move. I have it opening with JavaScript and have tried
$("html,body").css("overflow","hidden");
but it does not work. Any other thoughts?
Got it figured out (although not sure if it is the best way). I replaced
Open Modal
withOpen ModalI am up for better options if there are.
Is it possible without the help of a plugin to make a page scroll to a certain position on the click of a button?
Basically, if the user clicks a button a popup gets displayed in the center of the screen, if the user uses the button at the bottom of the page, the popup is sometimes out of view so I am wanting to couple the showing of the popup and scolling to the top of the popup on the clickup.
Is this possible?
Thanks
Using the CSS
position : fixed
is the best bet for your problem.
In case if you would like to know the way to scroll the page to certain position using jQuery then here it is.
Use jQuery's scrollTop() function in the following way.
jQuery(window).scrollTop(<position>);
Using jQuery to handle scrolling will also resolve any browser incompatibility.
You can get that effect with the scrollIntoView method. But it's probably better to centre your popup on the window rather than the document to avoid the problem in the first place ...
Sometimes lean and mean works nicely. No Plugins, No JQuery:
window.scrollTo()
Watch out for cross browser incompatibilities that might creep in. That's the point of JQuery ;)