I was looking for a solution to my problem and I saw a lot of different ways to do that but none of them worked to me.
I'll paste my code here and see if you can help me somehow.
I have a draggable popup to display a note. There is a list of items on the main screen and everytime the user clicks on the "View" link it opens the popup with the Note for this specific item.
Everything is working properly. The popup opens with the right information and I can move the popup around the screen. Then only problem I have is:
Once I close the popup and open a new one, instead of reseting the popup to the original position it opens exactly where I left the other one. I need to reset the position for the popup when the user closes it.
This is my js:
require(['jquery'
, 'bootstrap'
, 'datepicker'
, 'typeahead'
, 'combobox'
, 'tagsinput'
], function($){
// DOM ready
$(function(){
$('.modal-dialog').draggable();
$('#noteModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var note = $(e.relatedTarget).data('note');
//populate the textbox
$(e.currentTarget).find('span[name="note"]').text(note);
});
});
});
This is the modal on my html page:
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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" id="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I reset the position for the popup everytime the user closes it?
THank you!
Inside your click handler, you can use JQuery to set the css of the modal like so:
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
This will reset the position of your modal. You can use it before you call your modal in your JavaScript, assuming you are using JS to open your modal.
Try running the snippet below or see this CodePen Demo for an example of this using your modal.
// DOM ready
$(function() {
$(".modal-dialog").draggable();
$("#btn1").click(function() {
// reset modal if it isn't visible
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
$("#noteModal").modal({
backdrop: false,
show: true
});
});
$("#noteModal").on("show.bs.modal", function(e) {
var note = $('#btn1').data('note');
$(e.currentTarget).find('span[name="note"]').html(note);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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" id="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="btn1" data-note="I am a note. Hello.">Show Modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you want to keep the background usable while your modal is open, I posted a solution to this a little while ago here.
I hope this helps!
Related
I have been trying to get this working for hours, including many of those hours searching stackoverflow and elsewhere on google.
I'm using a rather strange setup via wordpress to iterate a number of bootstrap modals with an HTML anchor value associated with a booth number variable. I have a table with some javascript that, if there is a booth number within a given div, triggers a modal. Generally it's working great, except for one issue:
some of these modals have an id value with a comma seperated list. This isn't something I can structurally change right now, so i'm trying to get comma separated values to play nicely with the javascript and grid container i have set up.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".container1 > *[data-location]").click(function() {
var booth = "#" + jQuery(this).data("location");
jQuery(booth).modal({ show: false});
jQuery(booth).modal('show');
console.log(booth);}); });
here's a small chunk of my grid container:
<div class="k10" id="k10" data-id="k10" booth-number="710" data-location="710">710</div>
<div class="k11" id="k11" data-id="k11" booth-number="611" data-location="611">611</div>
<div class="k12" id="k12" data-id="k12" booth-number=""></div>
<div class="k13" id="k13" data-id="k13" booth-number="610" data-location="610">610</div>
<div class="k14" id="k14" data-id="k14" booth-number="511" data-location="511">511</div>
<div class="k15" id="k15" data-id="k15" booth-number=""></div>
<div class="k16" id="k16" data-id="k16" booth-number="510" data-location="510">510</div>
<div class="k17" id="k17" data-id="k17" booth-number="411" data-location="411">411</div>
<div class="k18" id="k18" data-id="k18" booth-number=""></div>
<div class="k19" id="k19" data-id="k19" booth-number="410" data-location="410">410</div>
<div class="k20" id="k20" data-id="k20" booth-number="311" data-location="311">311</div>
and a couple example pieces of my modals:
<div id="613" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="613">
<div id="710, 712" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="710, 712">
the first example being a working one, and the second a non-working one... I am slowly going mad trying to figure this out, i'd love any help y'all can give!
712"` using like this is totally not recommended. You need to create custom classes to particular modals and to the buttons where you trigger them. Just try below snippet you will more clear on it.
$(document).ready(function(){
$(".btn").click(function(){
var modalID = $(this).attr('data-id');
$("."+modalID).modal('show');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<button type="button" data-id="709" class="btn btn-sm btn-primary">709</button>
<button type="button" data-id="710" class="btn btn-sm btn-primary">710</button>
<button type="button" data-id="712" class="btn btn-sm btn-primary">712</button>
<div class="modal fade 710 712" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">710 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
<div class="modal fade 709" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">709 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
</div>
I have a bootstrap modal v3.2.0, which shows on page load. It is being used as an age verification pop up.
I am looking for a way to close this modal if a condition has been met. Basically, when the user clicks a button, I want it to close but I also want to ensure that the modal does not appear again on page load after clicking that button.
Here is the code
$(window).load(function(){
$('#myModal').modal('show')
});
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This code works to successfully load the bootstrap modal on page load and closes the modal when you click on the close button however the modal will still appear again on page load. As I am not very strong with Javascript, I am not certain how to go about a conditional or if statement. So far I have the bare bones:
if (condition) {
$("#myModal").modal('hide');
} else {
// block of code to be executed if the condition is false
}
Inside the original if statement should be if the close button has been clicked. It should also prevent the modal from auto loading again. Maybe I don't even need the else statement.
Their might even be a better option I haven't considered. Any help much appreciated.
$('#myModal').modal('show')
$('#over18').on('click', function (e) {
$('#myModal').modal('hide')
});
<!-- 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">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
For additional clarity, if I use the following code, when you click the button it does show the alert, so the javascript and code is working for that, it simply won't work when using the bootstrap: $('#myModal').modal('hide');
$('#over18').on('click', function () {
alert('Hello!');
});
So after some more playing around, the following code will auto open the modal, when the over 18 button is clicked it will be closed, and an alert will appear to say the modal is about to be hidden. I done this to make sure the javascript was working.
The line that is calling the alert is where I should be putting the localstorage line to ensure the modal does not show again. However this does not work.
$("#myModal").modal("show");
$("#over18").click(function(){
$("#myModal").modal("hide");
});
$("#myModal").on('hide.bs.modal', function(){
alert('The modal is about to be hidden.');
});
You could try something like this, to decide whether to show the modal:
// On initial page load
if (localStorage.getItem('age-verified') !== true) {
$("#myModal").modal('show');
}
Then, if the modal shows - do something like this:
// Upon the age being confirmed
$('#footer-close').on('click', function() { // This is for illustration - handle the close event on the modal however you choose
$("#myModal").modal('hide');
localStorage.setItem('age-verified', true);
});
Updated - based on new code you posted
I've managed to create a working example for you. The script tags in your HTML document need to be in the same order as below. Bootstrap relies on jQuery - so that needs to be declared first.
Also to note - if you try running this example in StackOverflow's code snipped editor, it won't work - as code snippets are sandboxed, and don't have access to localStorage. You should be able to run it locally on your own computer though.
if (localStorage.getItem('age-verified') !== true) {
$('#myModal').modal('show');
$('#over18').on('click', function (e) {
$('#myModal').modal('hide');
localStorage.setItem('age-verified', true);
});
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Your page content here</h1>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
You can refer to the official bootstrap reference guide to do this depending on what version of bootstrap you are using. See Reference
I'm attaching handler to the Bootstrap hidden.bs.modal event to detect when the modal is closed, but it can be closed in multiple ways:
Explicitly close it via$('#modal').modal('hide') or $('#modal').modal('toggle');
Clicking on modal's backdrop part (if allowed);
Via data attributes e.g. data-dismiss="modal"
Is there a way to detect which of the options was used? Inside the hidden.bs.modal handler e.target always appears to be div#modal
The thing is that hidden.bs.modal is an event that fires once the modal has been closed. So that is not the click event the user triggered from the close button, the corner X or the overlay...
That said, you can use the click event to store where the user clicked in a variable and milliseconds after, when the hidden.bs.modal fires, use the variable.
Demo:
$(document).ready(function(){
// Variable to be set on click on the modal... Then used when the modal hidden event fires
var modalClosingMethod = "Programmatically";
// On modal click, determine where the click occurs and set the variable accordingly
$('#exampleModal').on('click', function (e) {
if ($(e.target).parent().attr("data-dismiss")){
modalClosingMethod = "by Corner X";
}
else if ($(e.target).hasClass("btn-secondary")){
modalClosingMethod = "by Close Button";
}
else{
modalClosingMethod = "by Background Overlay";
}
// Restore the variable "default" value
setTimeout(function(){
modalClosingMethod = "Programmatically";
},500);
});
// Modal hidden event fired
$('#exampleModal').on('hidden.bs.modal', function () {
console.log("Modal closed "+modalClosingMethod);
});
// Closing programmatically example
$('#exampleModal').modal("show");
setTimeout(function(){
$('#exampleModal').modal("hide");
},1000);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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">
...
</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>
CodePen
You can use the hide.bs.modal event to capture the document.activeElement. If you have multiple buttons all of which include data-bs-dismiss='modal', this will allow you to determine which of those buttons was pressed. This avoids the need for onclick= approaches or additional event handlers.
It seems it would be more elegant if the Event object for the hide.bs.modal event had a .relatedTarget or similar which contained the triggering element, but alas that's not the case right now.
The example below assumes jQuery with $:
$(() => {
var $dlg = $("#myBootstrapModalDialog");
var $closeElement;
$dlg.on('show.bs.modal', (e) => {
// maybe do something to initialize the modal here...
})
.on('hide.bs.modal', (e) => {
$closeElement = $(document.activeElement);
})
.on('hidden.bs.modal', (e) => {
var id = $closeElement.attr('id');
// do something depending on the id...
if (id === 'btn-save') {
// save something
}
$closeElement = null;
});
});
Sample HTML:
<div class="modal fade"
id="myBootstrapModalDialog"
tabindex="-1"
aria-labelledby="myDialogTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-0 mx-auto">
<div class="modal-header">
<h3 class="modal-title text-primary" id="myDialogTitle">
Save this stuff?
</h3>
<button id="btn-close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-3">
Are you sure you want to save this stuff?
</div>
<div class="modal-footer">
<button id="btn-cancel" type="button" class="btn btn-link" data-bs-dismiss="modal">
Cancel
</button>
<button id="btn-save" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Save
</button>
</div>
</div>
</div>
</div>
I'm trying to open a modal when clicking on a node within a network map i have made using vis.js
I am unsure about where I would place the data-target tag,but I'm not sure if that's the issue, below is the JS that I have written to handle a click action as well as the modal
Currently the data-target is declared within the div tag where the network map is placed after it has been generated (I know this is wrong)
The JS is being Generated in PHP hence the PHP var being thrown in there
Click Action -
network.on( 'click', function(properties) {
var ids = properties.nodes;
var clickedNodes = ".$nodes.".get(ids);
console.log('clicked nodes:', clickedNodes);
console.log('/monitoring/loadNode/'+clickedNodes[0].id);
$( '#myModalDeviceDetails' ).html('<h1><center><font color=\'white\'>Loading</font></center></h1>');
$( '#myModalDeviceDetails' ).load( '/monitoring/loadNode/'+clickedNodes[0].id ).show();
});
Modal-
<div class="modal fade modal-primary" id="myModalDeviceDetails" tabindex="-1" role="dialog" aria-labelledby="Device Details">
<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" id="myModalLabel">Device Details</h4>
</div>
<div class="modal-body">
loading...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance!
I can see that is a bootstrap modal. It has functions like the following:
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
I would recommend hiding the modal when you load the page and than just show it.
I'm using bootstrap modal for destroying task objects. When I click on a given task on the index page the modal window pops up and the destroy link of that task gets loaded via data attr, so modal will know which task should be destroyed when user clicks on #delete-task-submit button.
The code works as it is, but I'd like to use data-behavior="delete-task-submit" instead of #delete-task-submit to be clear that this has nothing to do with styling and it's only there for the js call.
What's the right way to do it? I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
<div class="modal fade" id="delete-task-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="text-align:left">
<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" id="myModalLabel">Delete Task</h4>
</div>
<div class="modal-body">
<h4>Are you sure?</h4>
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button>
<a href="#" id="delete-task-submit" type="button" class="btn btn-danger" data-task-destroy-link >Delete Task</a>
<!-- DESTROY LINK GETS INSERTED HERE -->
</div>
</div>
</div>
</div>
$(document).on('click', '[data-behavior="open-delete-task-modal"]', function (event) {
var taskDeleteLink = $(this).data("task-delete-link");
$('#delete-task-submit').data("task-destroy-link", taskDeleteLink);
});
$(document).on('click', '#delete-task-submit', function (event) {
var href = $(this).data("task-destroy-link");
$.ajax({
type: "DELETE",
url: href,
dataType: "script"
});
});
I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
Replace $('#delete-task-submit') with $('[data-behavior="delete-task-submit"]') selector in that part of your code and add data-behavior="delete-task-submit" attribute to your link.
Delete Task