I'm using the latest HTML5 dialog element. And I use showModal to display multiple dialogs. So how do I get the topmost dialog element when multiple dialog elements are visible?
The dialog element does not seem to have this functionality built in. I think the only solution is to manually track your open dialogs.
Whenever a dialog is opened, append it to an array. The last item in the array will always be your active (topmost) dialog.
function show(dialog) {
dialog.showModal();
openDialogs.push(dialog);
logTopDialog();
}
function close(dialog) {
const i = openDialogs.indexOf(dialog);
if (i !== -1) {
openDialogs.splice(i, 1);
}
logTopDialog();
}
function logTopDialog() {
console.log(`Top dialog = ${openDialogs.at(-1)?.id}`);
}
const openDialogs = [];
btn1.addEventListener('click', e => show(dialog1));
btn2.addEventListener('click', e => show(dialog2));
dialog1.addEventListener('close', _ => close(dialog1));
dialog2.addEventListener('close', e => close(dialog2));
<dialog id="dialog2">
<form method="dialog">
<p>Second dialog!</p>
<button>Close</button>
</form>
</dialog>
<dialog id="dialog1">
<form method="dialog">
<p>This is the first dialog here.</p>
<button id="btn2" type="button">Open Dialog 2</button>
<button>Close</button>
</form>
</dialog>
<button id="btn1">Open Dialog 1</button>
I have added a close button to a div in Calendly popup in VueJS and I want to close this div when click on the close button. How can I do this?
This is my Calendly Code:
<TransitionRoot as="template" :show="openTimes">
<Dialog
as="div"
class="fixed inset-0 overflow-y-auto"
#close="closeModal"
:open="openTimes"
:initialFocus="closeModalTimesRef"
>
And this is the button I have added
<button type="button" class="close"
#click="$emit('close')"> X
</button>
You probably want to use the v-if directive (or other methods of conditional rendering available in the link).
Usually you set a key like: showDialog: true in your data/state object and add it to your dialog and catch the close event like so:
<script>
data() {
return {
showDialog: true;
};
},
</script>
<template>
<dialog
v-if="showDialog"
#close="showDialog = false;"
/>
</template>
You can use something like this :
<button onclick="showOrCloseDiv()">Click The Button</button>
<div id="thedivid">
JS tuto
</div>
<script>
function showOrCloseDiv() {
var v = document.getElementById("thedivid");
if (v.style.display === "none") {
v.style.display = "block";
} else {
v.style.display = "none";
}
}
</script>
I found this code while looking for a way to create popups and it does work but I am trying to figure out how make it work with multiple dynamically created divs.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
I would like to be able to use multiple buttons to control individual divs such as a button with id "pop1" will open the div "popup1" and button with id "pop2" will open div with id "popup2" etc.
<button id="pop1">Open popup</button>
<button id="pop2">Open popup</button>
<div id="popup1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup2" class="popup">
<h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>
I create the buttons and divs dynamically with php so there is no set amount and I would like to make sure that they all work no matter how many are generated. For each new div it increments the number on the id like you can see above.
I tried doing this but the buttons will print everything in all available divs because I am not targeting them individually. I can't figure that part out.
$(document).ready(function () {
$("button[id*=pop]").on("click", function() {
popupOpenClose("[id*=popup]");
});
});
Anyone have any suggestions? Thanks.
I have made some change on your html as it would be easy to get element this way
<button id="pop_1" class="btnpopUpOpen">Open popup</button>
<button id="pop_2" class="btnpopUpOpen">Open popup</button>
<div id="popup_1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup_2" class="popup">
<h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>
Jquery Code:
$("button.btnpopUpOpen").on("click", function(e) {
e.preventDefault();
var myID=$(this).prop('id').split('_')[1];
popupOpenClose('div.popup_'+myID);
});
$("form button[name=close]").off().on('click',function(e){
e.preventDefault();
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(this).parent().hide();
});
Note: If your are trying to add div dynamically after page is loaded.Make sure to re-register your event as well
I'm having troubles creating an exit button for the following script.
I'm using popup.js from http://docs.toddish.co.uk/popup/.
It sais that in order to do it we should use popup.close() from inside the object. But there are no examples and I can't get it to work. Does anyone have an idea?
JSFiddle link = http://jsfiddle.net/andrewallen817/bedhhu1o/3/
Html:
<a href=#txt class="popup" >Click here</a>
<div id="txt" style="display:none">
<h1>This is a title</h1>
<p>this is some text</p>
<button>close</button>
</div>
JS
$(function(){
$('.popup').popup();
});
I fixed it for you by looking at the doc. JSfiddle
$(function () {
$('.popup').popup({
afterOpen: function () {
var popup = this;
$('button').click(function () {
popup.close();
});
}
});
});
You might want to specify which button you want to give the popup.close() or else every button will have it.
I have a list box in the bootstrap modal and a button.
When the button is clicked a new button gets rendered inside a div in the modal.
When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.
How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.
<!-- Modal -->
<div
class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span
><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Select Language</h4>
</div>
<div class="modal-body">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn" id="submit_form">Submit</button>
<div class="modal-body1">
<div id="placeholder-div1"></div>
</div>
</div>
<div class="modal-footer">
<script>
$("#submit_form").on("click", function () {
$(".modal-body1").html("<h3>test</h3>");
});
</script>
<script>
$(function () {
$(".modal-footer").click(function () {
$(".modal").modal("hide");
});
});
</script>
</div>
</div>
</div>
</div>
-- Update ---
Why doesn't this work?
<script type="text/javascript">
$(function () {
$("#myModal").on("hidden.bs.modal", function (e) {
console.log("Modal hidden");
$("#placeholder-div1").html("");
});
});
</script>
Just reset any content manually when modal is hidden:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
There is more events. More about them here
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Tried it and working well
$('#MyModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset');
})
reset is dom build-in funtion, you can also use $(this).find('form')[0].reset();
And Bootstrap's modal class exposes a few events for hooking into modal functionality, detail at here.
hide.bs.modal This event is fired immediately when the hide instance
method has been called.
hidden.bs.modal This event is fired when the modal has finished being
hidden from the user (will wait for CSS transitions to complete).
What helped for me, was to put the following line in the ready function:
$(document).ready(function()
{
..
...
// codes works on all bootstrap modal windows in application
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
...
..
});
When a modal window is closed and opened again, the previous entered and selected values, will be reset to the initial values.
I hope this will help you as well!
Try cloning, then removing and re-adding the element when the modal is hidden. This should keep all events, though I haven't thoroughly tested this with all versions of everything.
var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
$('#myModal').remove();
var myClone = originalModal.clone();
$('body').append(myClone);
});
To reset all the input fields in a modal use the following.
$(".modal-body input").val("")
Here's an alternative solution.
If you're doing a lot of changes to the DOM (add/removing elements and classes), there could be several things that need to be "reset." Rather than clearing each element when the modal closes, you could reset the entire modal everytime it's reopened.
Sample code:
(function(){
var template = null
$('.modal').on('show.bs.modal', function (event) {
if (template == null) {
template = $(this).html()
} else {
$(this).html(template)
}
// other initialization here, if you want to
})
})()
You can still write your initial state in HTML without worrying too much about what will happen to it later. You can write your UI JS code without worrying about having to clean up later. Each time the modal is relaunched it will be reset to the exact same state it was in the first time.
Edit: Here's a version that should handle multiple modals (I haven't tested it)...
(function(){
$('.modal').on('show.bs.modal', function (event) {
if (!$(this).data('template')) {
$(this).data('template', $(this).html())
} else {
$(this).html($this.data('template'))
}
// other initialization here, if you want to
})
})()
(function(){
$(".modal").on("hidden.bs.modal", function(){
$(this).removeData();
});
});
This is perfect solution to remove contact while hide/close bootstrap modal.
That's works for me accurately
let template = null;
$('.modal').on('show.bs.modal', function(event) {
template = $(this).html();
});
$('.modal').on('hidden.bs.modal', function(e) {
$(this).html(template);
});
also, you can clone your modal before open ;)
$('#myModal')
.clone()
.modal()
.on('hidden.bs.modal', function(e) {
$(this).remove();
});
Reset form elements ( Works with bootstrap 5 as well). Sample code :
$(document).on("hidden.bs.modal", "#modalid", function () {
$(this).find('#form')[0].reset();
});
you can try this
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
It will remove all the data from the model and reset it.
I am using BS 3.3.7 and i have a problem when i open a modal then close it, the modal contents keep on the client side no html("") no clear at all. So i used this to remove completely the code inside the modal div.
Well, you may ask why the padding-right code, in chrome for windows when open a modal from another modal and close this second modal the stays with a 17px padding right.
Hope it helps...
$(document)
.on('shown.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
$(document.body).css("padding-right", "0px");
$(this).removeData('bs.modal').find(".modal-dialog").empty();
})
Sample code:
$(document).on('hide.bs.modal', '#basicModal', function (e) {
$('#basicModal').empty();
});
The below statements show how to open/reopen Modal without using bootstrap.
Add two classes in css
And then use the below jQuery to reopen the modal if it is closed.
.hide_block
{
display:none !important;
}
.display_block
{
display:block !important;
}
$("#Modal").removeClass('hide_block');
$("#Modal").addClass('display_block');
$("Modal").show("slow");
It worked fine for me :)
Using BS 3.3.7
$("#yourModal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null); // will clear all element inside modal
});
/* this will change the HTML content with the new HTML that you want to update in your modal without too many resets... */
var = ""; //HTML to be changed
$(".classbuttonClicked").click(function() {
$('#ModalDivToChange').html(var);
$('#myModal').modal('show');
});
Reset form inside the modal. Sample Code:
$('#myModal').on('hide.bs.modal', '#myModal', function (e) {
$('#myModal form')[0].reset();
});
To reset/clear all input fields from bootstrap modal use the following code:
$(".modal-body input").val("")
To hide/close bootstrap modal use the following code:
$('#yourModalId').modal('hide');
Keep Coding 😎