I use VueJS on one page. It's just imported from CDN so I can't use bootstrap-vue.
I'm trying to show and hide modal when showModal data is true.
So far it works but it does not show the gray overlay surrounding the modal. How can I do that? It's Bootstrap 5.
<div id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" class="modal fade"
:class="showModal ? 'show' : ''" :style="{display: showModal ? 'block' : 'none'}" :aria-modal="showModal ? 'true' : ''"
:role="showModal ? 'dialog' : ''">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="width: 400px;">
<form>
<div id="div_id_api_secret_key" class="form-group">
<div v-for="field in journeySourceApp.details.fields">
<label :for="field.name" class=" requiredField">
[[field.name]]<span class="asteriskField">*</span> </label>
<div class="">
<input type="text" :name="field.name" v-model="authorizeAppForm[field.name]"
class="textinput textInput form-control" required=""
id="id_api_secret_key">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="createAppInstance">Save</button>
</div>
</div>
</div>
</div>
</div>
It goes like this
<button class="btn btn-primary" v-on:click="newAddressModal.show()">
Show Modal
</button>
<div class="modal fade" id="newModal" ref="newModal">
<div class="modal-dialog">
<div class="modal-content p-3">
<div class="modal-header">
<h3>Header</h3>
</div>
</div>
<div class="modal-body">
body
</div>
</div>
</div>
<script>
import { Modal } from 'bootstrap';
export default {
data(){
newModal : null
},
mounted(){
this.newModal = new Modal(this.$refs.nweModal);
}
}
Works on vue 3 bootstrap 5
Related
Does anyone know what's wrong with below code? The modal is opened when I click the button that has to trigger this action, but when I click on close buttons that has data-dismiss="modal", it happens nothing.
<div class="modal fade show" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-modal="true" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> Schedule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form action="/schedule" id="modal-form" method="post">
<div class="input-container mb-3">
<textarea class="textarea-input" style="resize:none; width: 100%;" rows="5" maxlength="280" name="Text" required=""></textarea>
<br>
<div id="success-message" class="success-message mt-3" style="display: none;">
<span>Successfully scheduled</span>
</div>
<div id="error-message" class="error-message mt-3" style="display: none;">
<span>There was an error during scheduling</span>
</div>
</div>
<button class="btn btn-success" type="submit">Schedule</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is my jquery code, i've to hide modal using jquery, i tried using 'hide' but it doesn't work!
$(document).ready(function () {
$('#modalButtonLogin').click(function (e) {
e.preventDefault();
$('#loginModal').modal()
});
$('#reserveButtonModal').click(function (e) {
e.preventDefault();
$('#modelId').modal()
});
$('#dismiss').click(function () {
$('#modelId').modal('hide');
});
});
I'm using the same ids but i don't know how to do it the id's are 'dismiss'
i have a problem, cause using data-dismiss it works but i need to know how it works in jquery
<!-- Modal Task's -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reserve Table</h5>
<button type="button" class="close" aria-label="Close" id="dismiss">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row p-2">
<div class="col-sm col-lg-2">
<h5>Section</h5>
</div>
<div class="btn-group align-self-center" data-toggle="buttons">
Non-Smoking
Smoking
</div>
</div>
<div class=" row p-2">
<div class="col-sm col-lg-2">
<h5 class="">Date and Time </h5>
</div>
<div class="mr-3 pb-2 ">
<input type="date" name="dateinfo" id="" placeholder="Date">
</div>
<div class="mr-3 pl-4">
<input type="time" name="" id="" placeholder="Time">
</div>
</div>
<div class=" row offset-lg-2 offset-1">
<button type="submit" class="btn btn-primary"> Reserve </button>
<button type="button" class="btn btn-secondary ml-2" id="dismiss">Close</button>
</div>
</div>
</div>
</div>
You can try to replace $('#modelId').modal('hide'); by $('#modalId').modal('toggle');
I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.
How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.
Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<!-- parent modal -->
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-control">
<input type="text" placeholder="email" />
</div>
<div class="form-control">
<input type="text" placeholder="password" />
</div>
<button type="submit" class="btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
<!-- confirmation modal -->
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you want to exit? Your changes will not be saved.<br>
<button class="btn-danger">Discard</button>
<button class="btn-primary">continue</button>
</div>
</div>
</div>
</div>
Assuming you are using ng-bootstrap.
While using modal.open method you can pass keyboard attribute as false.
Its official doc can be found at :-
https://ng-bootstrap.github.io/#/components/modal/api
Eg:- this.ngbModal.open(content, {keyboard: false});
This is my HTML code for the first modal. The submit button is not functioning to open another modal.
<div class="modal fade" id="newModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New record</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="name"
placeholder="Input name of client">
</div>
</div>
<div class="modal-footer">
<button type="submit" onclick="submitForm()" class="btn
btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the HTML code for the second modal when you click the submit button on the first one.
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form action="php/insert_client.php" method="post">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you want to add this client?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="validateForm()">Save</button>
</div>
</form>
</div>
</div>
This is the javascript for the newModal and confirmationModal
function submitForm() {
document.getElementById("newModal").submit();
}
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Based on the JS code you've shown, this function will need to be called in order for your second modal to be displayed:
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Right now, it's not being called until the second modal's Save button is clicked.
I have a web page which displays jquery modal on button click.
$("#add").click(function () {
$("#dialog").modal();
});
HTML:
<div id="dialog" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="model" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add</h4>
</div>
<div class="modal-body">
<div class="form-group required">
<label class="form-control-label">Name</label>
<input type="text" class="form-control required" required id="name" pattern="[A-Za-z]*" placeholder="John"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="save">OK</button>
</div>
</div>
</div>
</div>
When I resize the screen i.e, change width of the screen beyond certain limit, modal gets disabled. Is it the default behaviour of jquery modals and how to overcome this.?