Reply To: regular button with modal popup and field validation

[Support]

Hello Pelle, first so glad know you are enjoying with our template and support!

Regarding your question:

Let’s use as base the contact-us.html page where we have a form with validation.

Open the page and add the code for modal where you want:

<button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#defaultModal">
	Launch Default Modal
</button>

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

Add the code below at js/views/view.contact.js:

// Open Modal
$('button[data-target="#defaultModal"]').trigger('click');

OBS: If you want to hide the button that opens modal, just add the class d-none:

<button class="btn btn-modern btn-primary d-none" data-toggle="modal" data-target="#defaultModal">
	Launch Default Modal
</button>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---