In this guide, we will explain how to use the select field inside the Modal body.
Example Popup Modal HTML
CSS to hide popup select field in the form.
<style>
div#component-321f-d99d-4fa8 {
display: none;
}
</style>Javascript to show a popup and listen to the pop-up event and append a select field
Form setup
Example Form JSON
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Select Options</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>// On input of select option in the select field based on which pop up will be displayed
formyoula.form_fields[ 'fa85-e6b4-bd9f' ].on( 'input:set:success', function() {
// Show pop-up modal
$( '#myModal' ).modal( 'show' );
} );
// On displaying modal or pop-up
$( '#myModal' ).on( 'show.bs.modal', function( event ) {
// #component-321f-d99d-4fa8 component id of select field that will be displayed inside popup
// Show select field inside the modal popup
$( '#component-321f-d99d-4fa8' ).show();
// Find modal body and append select field
$( this ).find( '.modal-body' ).append( $( '#component-321f-d99d-4fa8' )[ 0 ] );
} );