Opening a modal from a different modal

Topic: Opening a modal from a different modal

mdb2 pro asked 6 years ago

Let say that I have a login modal. In that modal there are 3 buttons: log in, sign up, forget password. Clicking log in logs in Clicking sign up should open the signup modal Clicking forget should open the forget modal How can I open one modal from an existing modal ?

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear mdb2, Could you please describe what are the exact problems with behavior you are trying to achieve? Best, Arek

mdb2 pro commented 6 years ago

Sure The scenario is about switching from one modal to another from the modal itself. Assume there are login modal and fogotPassword components located at the bottom of homepage component. There is a login button in the homepage When the user clicks the login button the login modal opens. Then the user clicks forgot password in the login modal. How can I open the forget modal from the login modal ?

Add comment

ionyx pro answered 6 years ago

0 0 Best answer

You could either update the content of the first modal, so replace login form with forgot password form or, the forgot password button, have a "click" event function that opens the new modal: <button id="forgot_pass" onclick="forgotPassLoad()"></button> function forgotPassLoad(){ // using jQuery as an example $('#forgotpassword_modal').modal(); // show modal $('#login_modal').modal('hide'); // close login modal }

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear mdb2, You can bind some method like showPasswordModal to (click) method on forgot password link. And in this method, the only thing which you have to do is to call show() method from ModalDirective. So your ts code should look like below:

@ViewChild('framee') framee: ModalDirective;

showForgotModal() {

this.framee.show();

}

Hope my advices will help you to figure out your case. Best Regards, Damian

mdb2 pro commented 6 years ago

The problem is that the 'framee' is not a child of the comp where the button is Inspired by https://mdbootstrap.com/support/calling-modal-in-component-from-another-component/ I created a modal service that registers all modals globally in that service and then shows or hides them. I sent you a demo by email

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

itay

Pro User

2474Support score
150Questions 196Answers

0Snippets likes 0Snippets