Having a bit of a problem with using Bootstraps modal,
I have a login form which uses a modal (when pressed the login form will appear)
If the user does not have an account, they can press "sign up" I would like the login modal to be dismissed and the sign up modal to appear
I have this working, the login form is dismissed when sign up is clicked, but when the sign up modal is shown, you cannot scroll up or down on the sign up modal, (you can scroll up or down on the login modal)
sorry for the long explanation, the jsfiddle below is my code,
<p> Don't have an account? <a data-dismiss="modal" data-toggle="modal" data-target="#myModal1"> Sign up</a>
This is the code which dismisses the login modal and shows the sign up modal. I know that the modal is dismissed via data-dismiss="modal" (so the page thinks the modal is closed and scrolls through the web page) however I do not know how to find a way around this.
The lorem ipsum is there to show the example of the scrolling.
The first form is the login modal and the second form is the sign up
Thank you for the help!
I succeeded with the following. I created a class with attribute overflow: hidden. Anytime the myModal1 opens, it's added to the body.
$("#button").click(function(){
$('#myModal').modal("hide");
$('#myModal1').modal("toggle");
$("body").addClass("notScroll");
});
When myModal1 closes, the class is removed:
$('#myModal1').on('hidden.bs.modal', function () {
$("body").removeClass("notScroll");
});
Now, you have to allow myModal1 to scroll:
<modal... id="myModal1" style="overflow-y: scroll">
JSFIDDLE: http://jsfiddle.net/5v4nejsz/22/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments