On a Bootstrap 3 site I have a dialog box. It always opens when its associated button is clicked. However, I would also like it to open when called by a certain function in Javascript:
$('#login').modal('show');
This code works on most screens, but doesn't work on mobile devices (screen size 'xs'). I can't work out why. Here is a minimal(ish) reproduction - resize the preview pane and reload to see what I mean.
http://jsfiddle.net/u7KW6/
The problem seem to appear because you placed your modal div inside your navbar-header. If you move it outside that div like in this example, it will work as you wish.
Related
I am trying to develop a simple UI for my Web application where a client can click on an image and
a popup appears explaining the content of the image to the user. The way I intended this feature to
work is that by clicking on the image the popup appears and by clicking anywhere on the page, INCLUDING on that image,
the popup should close and you are free to click on it again to show it once more. On the desktop version, everything is working like a charm.
But on the other hand, when I switch to the mobile version of my UI in my browser, when I click on the image, the popup appears but when i click on it again,
an other popup just go stack on top of the other. If i click anywhere else on the screen, it close them but not when i click on the image like it should.
My question is: Does anyone knows why this type of behavior is happening and how i can fix this ?
Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.
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.
So I have a 4 window frameset that is setup so that when the main content page loads, it changes the menu options on the left frame menu. Everything works correctly in FF and Chrome, but IE is giving me a problem. I think the problem lies in the javascript.
In IE, the menu items correctly change text, but when clicked on seem to trigger the wrong link. I have an example setup here.
Click on Customer Login on the left, then Sign Up in the main content area. From here, if you click on New Order/Browse, you'll arrive at the Create Order screen when using FF or Chrome. In IE, you'll find yourself back at the login screen.
I need help in getting the menu links on the left working correctly in IE7.
I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel