Opening modal element on click of another element

[vks_group]

Hey,
I’m facing an issue with opening a modal by clicking on the header menu item. I’ve gone through the forum’s previous questions and found some JS and css but none of that helped me. Please let me know what is wrong here.
I’ve used this simple js
$(document).ready(function(){
$(’.place_an_order_form_popup’).on(‘click’, function(){
$(’#modal-open-anchor-toggle’).click();
});
});

It seems like that modal button get change but it didn’t open the modal over front-end.

[tristup]

Hi Ketan,

Thanks for reaching out.
I would suggest you go through the following threads, which may help you open a modal by clicking a button.

Make button trigger modal, but only upon click (not at pageload)

Hi there. As you know, I would like to use a button to trigger a modal, because the button allows different styling options than the modal toggle itself (such as adding animated graphics in combination with text in the toggle). I am not sure I understand your comment: “If you refresh the page, it will take the current URL where the #test is added due to the button click.” I am aware of the fact that the modal is triggered - this is the very reason for my ticket. But whereas the modal is trig…

Open Modal on hover

Hi, I have tried to implement an “open on hover” using JQuery as per your link CSS/JS needed to make Content Area Modal element open on hover? but I can not seem to get it to work. My staging site is https://loving-tu.77-68-9-139.plesk.page/ Please can you advise. Many thanks Steve

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom-coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes, which means we can’t fix them in case they conflict with something on your site, nor will we enhance them. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[vks_group]

Hey, Thanks a Lot.
These threads helped me in my case. Now my issue is my modal contains the form and hence it is having an submit button in it. So whenever user clicks on that modal gets close or if user clicks anywhere else than too modal get close. Please help me in this case. I don’t want to close it on any click till user click on the x button to close the modal.

To open a modal element please click on the Place an order menu item which is in header.
One more issue I want to keep modal’s height fixed when the content get increase than too. But currently what is happening the content is going out of the modal element on giving fixed height to the modal.
To stopping the content to coming out of the modal element I applied the css overflow:hidden for the modal element.
But than the scroll bar is not coming in the modal to scroll the content of my form.

To reproduce this issue click on the Place an order in menu of header(https://ehob.founderscaffe.com/), now please select any of one option from dropdown of customer type.

I followed this thread – Modal containing a form closes on form submit before the success message loads
But not able to figure out whats the exact solution for this.

Please help me in this case as soon as possible. It’s an urgent case.
@ruenel @tristup

[vks_group]

The height issue is resolved now but closing of modal on submit button click is still there. Please help me as soon as possible.

[tristup]

Hi Ketan,

That is only possible if the form is submitted using the AJAX request, so the page will not be refreshed. Alternatively, you can use Contact Form 7 which submits the form through the AJAX request by default.

Hope it helps.
Thanks

[vks_group]

I’ve to use ninja form only. Please give me any alternative for this. This is the only my client’s demand. Please provide me any solution or code snippet to do this with ninja form.

Please see this thread here something is mentioned if that can work. I need top make it work in any case please help me with this.
@tristup

[tristup]

Hi Ketan,

In that case, I would suggest you contact the said plugin author and check if there is any option to submit the form using AJAX. So it will work as you are expecting.

Thanks

[vks_group]

I’ve solved this issue by using JS. Now I need help in closing the modal element on click of x button only. Currently it get close when user clicks outside of it. It shouldn’t get close on this action.

[tristup]

Hi Ketan,

That is a default feature of the Modal elements, to override that you need to add custom coding. To do so, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One TOTAL CARE, where we offer small customizations

Thanks