I am writing tests for my Bootstrap 3.x webapp using Nightwatch. All is working fine, but I would like to add the "close modal by clicking somewhere next to it" in one of my tests. I don't seem to be able to identify the html element that's supposed to receive the click event however.
Can anyone help me with this?
Thanks!
The background is a div with class .modal-backdrop. According to the docs: "...generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal."
Related
So I do not know exactly on how to word this so I tried my best in the title.
What I am trying to do is have a modal popup and as the user clicks a next button, it slides to the next screen. Here is an example of what I am trying to accomplish.
This is the home screen. When a user hits start a Ionic Modal pops up
This is the ionic modal. I am going to add a next button that allows a user to go to the next screen or go back to the previous screen before submitting.
SO, I do not want to use states because I do not want to have to create a state in app.js for each and every screen. Is there a way to add multiple views and switch between them using a Ionic Modal? Or will I have to use States or create multiple Modals?
TL;DR -> I want to slide between views when a next or back button is pressed. (Survey application)
NOT looking for code writing exactly, just trying to pick someones brain on how they would accomplish the sliding between views using a Modal
Thanks everyone!
You probably need on click on your button :
force close of your modal
use $state.location to change $state
This is what I'd try if I was in your situation ;)
I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.
here is an example:
http://www.bootply.com/FGNRPwSRgH
Just look on the right side of the screen when closing the second window.
Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.
When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.
http://www.bootply.com/8K2wKO0c7I
$('body').append(
$('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);
If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals
I'm working on an existing MVC4 application, and need to implement a modal form.
I'm trying to implement this solution...
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
This works just fine, but the example uses a link, and I need it to be a button.
I could try to style the link as a button, but there's a bunch of other buttons on the same form and it would need to look exactly like those, and I haven't found a good way to style the link exactly like the other buttons in every browser, since most of the button's default style properties aren't overridden.
I've tried wrapping the link around a button, like shown below...
<button type="button">Continue</button>
This works fine in Chrome, but in IE11 when I'm testing the button shows up but doesn't do anything when I click it. Again, the exact same code works fine in Chrome - pressing the button does pop the modal open, but doesn't work in IE. Also, you get an HTML5 validation warning when a button is nested inside a link.
So, what can I do to make my link look exactly like all my other buttons? Or is there some way I can implement this modal solution without using a link that directs to an anchor?
Not sure why your current example isn't working but there are plenty of examples in this stack overflow question/answer Here.
I am trying to create a popover for a button or div that I want the user to click. The popover should display at the start when the screen loads and the user should be able to click on it to make it disappear (either the popover or the button).
Has anyone tried to do anything similar before?
I'd prefer to use the Angular-UI Library (http://angular-ui.github.io/bootstrap/) if possible but other solutions would be great too.
I have tried using stuff similar to this but the popover clearly only appears on mouseenter or click/focus if I change the trigger.
Enter a post
Any help would be much appreciated!
Im using Bootstrap on a website where a page has a few modals.
Using Chrome Dev Tools i was testing the network usage and noticed that the images in the modal view are called/pre-loaded when the page loads - I guess that makes sense they are all in divs on a single page.
So my question is it possible to avoid that div from running only until the actual link to a particular modal is clicked?
Thanks.
Use $.get or $.load in the click event handler of the button to display the modal.
Note that the HTML data you load via this ajax technique must be in the right bootstrap modal template.
See this gist here