I'm using bootstrap 5 in my web app and the modal is not showing up.
Here is the HTML for my modal and for the button activating it:
<div
class="modal"
tabindex="-1"
id="newInstallModal"
aria-labelledby="settings"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<input
id="newInstallButton"
type="button"
class="btn btn-outline-primary"
value="New Install"
/>
And here is the typescript code assigning that bootstrap-5 provided to open the modal via js.
newInstallModal = <HTMLDivElement>document.getElementById("newInstallModal");
newInstallButton = <HTMLButtonElement>document.getElementById("newInstallButton");
newInstallModal.addEventListener("show.bs.modal", () => {
newInstallButton.focus();
})
Any help is good, because I'm done debugging for today.
Bootstrap-modal v5 usage:
Either you have to use data- attributes:
<button type="button" data-bs-toggle="modal" data-bs-target="#newInstallModal">Launch modal</button>
OR via script:
var myModal = new bootstrap.Modal(document.getElementById('newInstallModal'), options)
EDIT: Also
myModal.addEventListener('shown.bs.modal', ...)
is just an eventlistener for when the modal is shown (after show transition ended)
Related
From Bootstrap website, it always use button to show the modal.
I am using React, so I want to use javascript manipulate whether the modal shows.
Is there any way to make the modal show as default?
Modal.js
...
return(
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
)
import "./styles.css";
import Modal from './Model'
export default function App() {
return (
<div className="App">
<h1>123</h1>
<Modal/>
</div>
);
}
you can use jquery to show or hide
$("#id of your modal").modal("show");
$("#id of your modal").modal("hide");
jQuery must be referenced first . before the bootstrap
if you wanna use pure javascript only you can change it manually like bellow:
<!-- Modal -->
<div id="mymodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" id="close-btn" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button id="close-btn" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
// select close buttons
const mymodal = document.getElementById('mymodal');
const close_btn = document.querySelectorAll("#close-btn");
//show the modal
mymodal.style.display = "block"
//close modal function
function hide() {
mymodal.style.display = "none"
}
//clise the modal when you click the close btns
close_btn.forEach(close => {
close.addEventListener("click", hide)
})
</script>
and change the script in order you want
I am having difficulties trying to get my modal to come up. I am not sure if it is because modal is not compatible with angular-gantt or if I have the code wrong. At the moment I get a darker screen as if there should be a modal there.
Here is the code for the button in the gantt:
JS:
'content':'<i class=\"fa fa-cog\" data-toggle="modal" data-target="#hp_modal" ng-click="scope.show_details(task.model)"></i>' + 'Gant Object'
Html:
<div class='modal fade' id='hp_modal'>
<div class='modal dialog'>
<div class='modal-content'>
<div class="modal-header">
<h3>This is HP modal</h3>
</div>
</div>
</div>
</div>
And here is an Image of after I click on the cog:
https://imgur.com/a/CazzaLK
You need to remove all the class modal modal-dialog and modal-content
Angular already create them automaticly when you open your modal.
You just keep this tags :
<div class="modal-header">
<h5 class="modal-title">My Title</h5>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" class="form-control" autofocus/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Then if you need to use some features such as modal-dialog-centered, you need to use the NgbModalOptions on open method :
this.modalRef = this.modalService.open(
this.dialogTemplateRef,
{centered:true}
);
How to use a button to show the modal in other components? For example, I have the following components:
info.vue
<template>
<div class="container">
<button class="btn btn-info" #click="showModal">show modal</button>
<example-modal></example-modal>
</div>
</template>
<script>
import exampleModal from './exampleModal.vue'
export default {
methods: {
showModal () {
// how to show the modal
}
},
components:{
"example-modal":exampleModal
}
}
</script>
exampleModal.vue
<template>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
hihi
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
How to show the modal from exampleModal.vue? I know that I can
use data-toggle and data-target to show the modal, like this:
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
But is there any way to show the modal by using the method "showModal"?
According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle and data-target attributes in that case:
<div id="app">
<div class="container">
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
<example-modal></example-modal>
</div>
</div>
Edit
I misread the question so i edit my answer.
It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs and then open the modal with a bootstrap method (Bootstrap Programmatic API)
<div id="app">
<div class="container">
<button class="btn btn-info" #click="showModal">show modal</button>
<example-modal ref="modal"></example-modal>
</div>
</div>
methods: {
showModal() {
let element = this.$refs.modal.$el
$(element).modal('show')
}
}
Fiddle example
Without jQuery you could create a function on "method:" block like this:
openEditModal(data){
// <handle with your data>
this.$root.$emit("bv::show::modal", "your-modal-id");
}
I am having issue rendering the bootstrap modal using Jquery this is what I have so far:
HTML
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Jquery
$('#update_modal').on('click', function() {
console.log("clicked");
jQuery.noConflict();
$("#myModal").modal('show');
})
there is a button which has the id as "update_modal".
Here is a Snapshot of how it look like. As you can see its not rendered everything correctly and I cannot click any where to close the modal off too.
Please can someone tell me if I have missed anything off. Thank You
Here, I have replicated the problem https://jsfiddle.net/z26sxpvk/2/
$('#update_modal').on('click', function() {
$("#myModal").modal('show');
});
#myModal {
z-index:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Problem is happening because the modal's z-index is less than modal-backdrop.
Here you go with a solution https://jsfiddle.net/z26sxpvk/3/
$('#update_modal').on('click', function() {
$("#myModal").css({
'z-index': 1050
}).modal('show');
});
#myModal {
z-index:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="update_modal" type="submit">
Open Modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Just increase z-index value for modal.
$('#update_modal').on('click', function() {
$("#myModal").css({
'z-index': 1050
}).modal('show');
});
Hope this will help you.
This one works for me, added aria-hidden="true" in first <div>
<div class="modal" id="myModal" role="dialog" aria-labelledby="exampleModal" 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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning">
<small>If you don't save, your changes will be lost.</small>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Your modal
I tried your code and its showing perfectly and can to be closed with the button.
I assuming you to try showing and hiding modal via attriubutes before, with class="modal" and data-target="#myModal". If your modal is not showing perfectly like your code above, maybe that of this categorize :
1. Placement modal is wrong.
2. Or upgrade your bootstrap framework.
Try with attributes before, then with javascript like your code or improvement.
Hope this can help you.
Keep your spirit :D .
So I am trying to close a modal my markup looks like thi s
<modal v-show="isVisible"></modal>
<button #click="isVisible=true" #close="isVisible=false">Show Modal</button>
My componenet is like this
Vue.component('modal',{
template:`<div id="exampleModalPopovers" role="dialog" aria-labelledby="exampleModalPopoversLabel" style="display: block; padding-right: 15px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">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">
<h5>Popover in a modal</h5>
<p>This button triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p>This link and that link have tooltips on hover.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" #click="$emit('close')">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>`
})
new Vue({
el: '#root',
data:{
isVisible:false
}
})
So the Modal opens fine but when I try to click on the close button of the modal its not working and I don't find any error also
You should put #close on the modal:
<modal v-show="isVisible" #close="isVisible=false"></modal>
Because the event is emitted from the modal, not the button.
If you are referring to this, than you have to modify it like this:
<modal #close="isVisible=false" v-show="isVisible"></modal>
<button #click="isVisible=true">Show Modal</button>
You are emitting the close event here, inside modal component:
<button type="button" class="btn btn-secondary" data-dismiss="modal" #click="$emit('close')">Close</button>
so it will be receiving that event at modal.