In either Javascript or HTML, is there a way to disable all user input except for a selection of keyboard presses? For example, if I trigger an error that shows a popup error message, is there a way to block any other user input into the DOM in the backround until the user has dismissed the popup using the Enter key?
Thank you all in advance!
If I understand you correctly, you might want to disable keyboard and mouse activity beyond the modal when opening like with this related question. Here is the summary of the options included:
If you opening the modal by js use:
$('#myModal').modal({backdrop: 'static', keyboard: false})
If you are using data attributes, use:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
Related
I have two modal which was opened in nested way. The ESCAPE keyboard only works in the closing of the second dialog. The first dialog does not close via keyboard unless I click on the dialog again to regain the focus. I am trying to restore the focus of the modal to the first dialog. So the user can do a consecutive [ESCAPE] - [ESCAPE] key to close both dialog. Both have tabindex="-1".
First dialog was called inside the main js file.
$('#firstDialog').modal({
cache: false,
backdrop: 'static'
}, 'show');
Second dialog was called inside an event of a button in the first dialog
$('#secondDialog').modal({
cache: false,
backdrop: 'static'
}, 'show');
I tried the following, to manually set the activeElement when second dialog is closed. It does not seem to work.
$('#secondDialog').on('hidden.bs.modal', function(){
document.activeElement = $('#firstDialog')[0];
});
I referred the solution in the following thread on setting the activeElement. Any ideas what object does bootstrap need to be focused to have the escape back automatically?
https://github.com/twbs/bootstrap/issues/4854
Found out the answer minutes after formulating the question. Anyway, if others have any better solution than this, please give me a suggestion. My thought is it should work by default.
$('#secondDialog').on('hidden.bs.modal', function(){
$('#firstDialog').focus();
});
Bootstrap modal is linked with a button. I want to get some data on click. But the bootstrap default event is not letting the v-on:click event to trigger. Any help will be appreciated.
<a data-id="{{ $order->id }}" data-toggle="modal" class="changeartwork" data-target="#uploadModal" #click="getData()">Upload</a>
Use: v-on:click.prevent.stop="getData()" instead. This will stop the on click bubbling up to Bootstrap and overriding it.
See here for more info: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
Note: It's possible that .prevent would be enough but without a test case, I'm not sure so just give it a go and see which works.
I am trying to do a postback when clicking on a link that opens a popup window modal. I have tried __doPostBack() with no luck. Once I remove the two attributes data-target="#Modal" data-toggle="modal" PostBack works but my popup window will not work of course.
link
How can I keep my modal and do a postback when opening it?
Please help this newbie
I think you can use an event when your modal is opened, like this:
$('#NotesModal').on('show.bs.modal', function (e) {
// do something...
});
Removing the attributes data-target="#Modal" data-toggle="modal" your anchor will not show anymore the modal. And this is normal.
In this case you can add a click event listener to your anchor so that after dopostback you can show your modal with:
$('#OpenNotes').on('click', function(e) {
do your postback....
$("#Modal").modal('show');
});
For details see the documentation
I am working on an application and need to open a modal, have the user fill in some details and save them once they click the modal button i have designated. I have used jQuery on to bind a click event for the button. problem is the click event is triggered when the modal opens.
Relevant parts of modal:
<div class="modal-footer">
Close
Save Event
Where i bind the event:
$('#save-event').on(
'click',
function(evt)
{
console.log('triggered');
}
);
The console shows 'triggered' when i open the dialog. I open the dialog through:
{% trans "Event also occurs on" %}
Its a Django app so the curly braces. Any ideas what i could be doing wrong or is there another way to execute some logic once the user clicks the relevant button?
You might be having 2 elements with the same id in the html and you are getting the event triggered when you are clicking on the other element.
Try adding the following to your jQuery code:
evt.stopPropagation();
Sorry, should clarify, add this to the code triggering the modal opening.
Edit: since you don't have direct access to the modal code, try the following in your jQuery:
$('#add-event-modal').on('click', function(evt) {
evt.stopPropagation();
});
I'm using the popover object from Twitter's Bootstrap library in manual mode and I was wondering how I should go about closing the tooltip when the user clicks away from it.
Here is my HTML:
<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>
and my JavaScript:
$('#stats-bar').click(function(e) {
$(this).popover('show');
});
How can I hide the popover when the user clicks anywhere but the popover itself? I thought of using a fixed transparent div behind the popover and set its click event but I'm not sure that's the best way.
I ended up wiring up to the document click event and hide any tooltips at that point
$(document).click(function (e)
{
// check the parents to see if we are inside of a tool tip. If the click came
// from outside the tooltip, then hide our tooltip
if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
});
If you are using a manual trigger option and wiring up to the click event to show the tooltip you will need to call e.stopPropagation() to prevent the document click event from firing when showing the tooltip.
I opted to use a fixed transparent div behind the popover and set its click event as this seems like the most robust and simple solution.
What about an generic click event listener that triggers where ever you click within the body? Check out this post, it looks similar to what you're trying to achieve.
https://stackoverflow.com/a/2125122/1013422
You would use this to close the actual popover
$('#stats-bar').popover('hide')
I would only define the function when the popup event is run and then remove it once you've closed the popup, that way you're not constantly listening for click events.