Develop Reference

Javascript create button and trigger onclick function on HTML

I'm facing an issue , where the javascript is responsible to create the button then show it on HTML( Pop up box ).
Once it's created, i want the user to freely click a button to close it.
The workaround is by setting the modal.style.style=display
.
In the HTML:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close'>×</span>
<div id ="sub" >
</div>
</div>
I have a function to create a modal box upon getting success variable, i'm appending to the id sub.
div.innerHTML =
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"
When it shows on HTML, i want to trigger an onclick function to close this modal box.
Because everything is created by the javascript, so I think the issue it's not triggering any line.
I've tried creating an onclick function to trigger
var modal = document.getElementById('myModal');
function clear(){
modal.style.display = "none";
}
I've also tried
var modal = document.getElementById('myModal');
var vicious = document.getElementById("vicious");
vicious.onclick = function() {
modal.style.display = "none";
}
I'm out of idea, could someone guide me?
Thanks in advance.
JSBIN: http://jsbin.com/rusapudodo/edit?html,js,output

As you are using jQuery, you can achieve hiding of modal as per below steps,
Remove binding of click event, onclick='clear()'. This is not needed.
Bind listener to the element with id as vicious using,
$('#vicious').click(function() {
$('#myModal').modal('hide');
});
Alternatively try the following approach,
$("#vicious").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Stop the event from bubbling up.
If you want to use vanilla javaScript onlt then include the following code after you set the inner html,
var btn = document.getElementById("vicious");
btn.onclick = function() {
alert();
modal.style.display = "none";
}

You can try something like that :
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close' onclick="close()">×</span>
<div id="sub">
</div>
</div>
</div>
</div>
<script>
function close(){
document.getElementById('myModal').style.display = 'none';
}
</script>

You need to move the selector inside the function:
function clear() {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}
EDIT: using your second technic:
div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;

For disabling button, you can use the below code
$("#button0000000001").find("button").attr("disabled", true);

Modal is transitioning error with bootstrap4 alpha6 modal

I am using bootstrap4 alpha 6 Modal, I am getting:
Error: Modal is transitioning
That happen when I am trying to re-trigger the same modal again with dynamic data through JavaScript function as following:
function openModal(title, text) {
$('.modal-title').text(title);
$('.modal-body p').text(text);
$('#modalAlert').modal('show');
}
I tried to use setTimeout function, but didn't work as in this article:
https://github.com/twbs/bootstrap/issues/21687
Any suggestions?

The quickest solution is to remove the modal 'fade' class which is throwing this error. It seems to be a known issue of the Bootsrap v6 that will be fixed in a next released.
See here

Worked with removing fade from parent div class.
Final Modal code ( Adding here for posterity ) :
HTML
<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<img src="ico/4.svg">
</div>
</div>
</div>
</div>
</div>
JS
$.ajax({
type: "GET",
url: "/getTimeline",
data: {
'dateTime': selected
},
async: true,
beforeSend: function () {
$('#applemodal').modal({
backdrop: 'static',
keyboard: false
});
},
success: function(data) {
$('#applemodal').modal('toggle');
}
});

i am using bootstrap 4 Modal too, My solution;
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});

First open the modal and then try to find the DOM elements that's inside modal (eg. $('.modal-title') and $('.modal-body p'))
Changing the order of executing your function might work:
function openModal(title, text) {
$('#modalAlert').modal('show');
$('.modal-title').text(title);
$('.modal-body p').text(text);
}
Finally, make sure that modal is open/visible in the screen when you access HTML that's inside the modal.

Please set your button type='submit' to type='button'

My solution was to open the model programmatically rather than through the link.
Instead of:
Open My Modal
Use:
Open My Modal
$('#myLink').on('click', function(){
$('#myModal').modal('show');
})

Problems with new Google reCAPTCHA in IE when inside modal or dialog

reCAPTCHA works perfectly well in Chrome.
However, (only when reCAPTCHA iframe is inside a dialog box or a modal) in IE the placeholder won't go away.
Whatever the user writes is considered part of the placeholder (I think) and the "verify" button won't be enabled to be clicked.
The picture explains this:
The same code works perfectly well in all browsers when I take the recaptcha div outside the modal
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : '6Lc7PAATAAAAAE7JwcA7tNEDIrczjCCUvi3GiK4L'
});
};
</script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<!-- 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">
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</body>
</html>

The problem is generated by the the modal component of Bootstrap.
When the modal is about to appear this function is called:
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
The function adds a "focusin" event to the document to be sure that the focus is still inside the modal; if the focus goes to another element outside the modal then the latter immediately obtain it back.
Therefore, when you click inside the recaptcha form the focus' conflict causes the Internet Explorer bug.
Anyway, one possible solution is to override that method and disable the focus-back behaviour when a recaptcha component obtain the focus, but this is quite difficult to do because there is no control over the recaptcha html (how can you know if e.target is an element of recaptcha?).
My solution is to completely disable this behavior, to do this just override the enforceFocus function with an empty function:
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
A more elegant solution would be apreciated. :)

Old recaptcha, i.e. version 1.0 works ok on the modal

To follow up on the response by 'Digibusiness', A little more elegant would be to override the entire bootstrap function with a practical one (on your page load - the document.ready function would be a good place).
This way, you can refer only to IE when overrding + only to iframes loaded on the modal, hence not screwing accessibility(which have become a big deal these days) all over the site just for a specific iframe-over-modal-on-a-specific-browser functionallity fix.
The code goes follows:
if (window.navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { // If Internet Explorer
$.fn.modal.Constructor.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
if (e.target.nodeName !== "IFRAME") {
this.$element.trigger('focus')
}
}
}, this))
}
}

Select text input when bootstrap modal open

I have a input inside of a bootstrap modal. When the modal is opened, I want the input that that is inside the bootstrap modal to be automatically selected.
I have the following code:
$('#modal').on('show.bs.modal', function (e) {
$(this).$("input").select();
})
and my modal looks like:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<input type='text' disabled value="test">
</div>
</div>
</div>
</div>
Unfortunately, with this code, I'm getting the error "Uncaught TypeError: undefined is not a function "

Use .find() and then .focus()
$('#modal').on('show.bs.modal', function (e) {
var input = $(this).find("input"); // cache the variable
input.removeAttr('disabled'); // enable it first, so it can get focus
input.focus(); // focus it
})
and then use .focus() to focus the element. There is nothing called .select() in jQuery core.

what worked for me:
$('#modal').on('shown.bs.modal', function (e) {
$('#modal input[type="text"]')[0].select();
});
note the use of .on('shown.bs.modal'), not .on('show.bs.modal')

try
$('#modal').on('show.bs.modal', function (e) {
var input= $(this).find("input");
if(input){
input.removeAttr('disabled');
input.focus();
}
})

Disable click outside of bootstrap modal area to close modal [duplicate]

This question already has answers here:
Disallow Twitter Bootstrap modal window from closing
(27 answers)
Closed 1 year ago.
I am making a bootstrap website, with a couple of Bootstrap 'Modals'.
I'm trying to customize some of the default features.
Problem is this;
You can close the modal by clicking on the background.
Is there anyway to disable this feature?
On specifc modals only?
Bootstrap modal page

On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal.
As #PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc.
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>`

This is the easiest one
You can define your modal behavior, defining data-keyboard and data-backdrop.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

You can use an attribute like this: data-backdrop="static" or with javascript:
$('#myModal').modal({
backdrop: 'static',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
See this answer too: Disallow twitter bootstrap modal window from closing

In my application, I am using the below piece of code to show Bootstrap modal via jQuery.
$('#myModall').modal({
backdrop: 'static',
keyboard: true,
show: true
});

You can use
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
to change the default behavior.

There are two ways to disable click outside of bootstrap model area to close modal-
using javascript
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
using data attribute in HTML tag
data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.

Checkout This ::
$(document).ready(function() {
$("#popup").modal({
show: false,
backdrop: 'static'
});
$("#click-me").click(function() {
$("#popup").modal("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="popup" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<a id="click-me" class="btn btn-primary">Click Me</a>
</body>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

Put this code in the first block of your modal html
Bootstrap 4.x
data-keyboard="false" data-backdrop="static"
Boostrap 5.x
data-bs-keyboard="false" data-bs-backdrop="static"
Example:
<div id="modal-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
Docs bootstrap 5: https://getbootstrap.com/docs/5.1/components/modal/#options
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

Another option if you do not know if the modal has already been opened or not yet and you need to configure the modal options:
Bootstrap 3.4
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal').options.keyboard = keyboard;
$modal.data('bs.modal').options.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
Bootstrap 4.3+
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal')._config.keyboard = keyboard;
$modal.data('bs.modal')._config.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
Change options to _config

Use this CSS for Modal and modal-dialog
.modal{
pointer-events: none;
}
.modal-dialog{
pointer-events: all;
}
This can resolve your problem in Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
try this,During my application development ...I also met the trouble that default values for a model attribute => data-keyboard="true",
=> data-backdrop="non static"
Hope this will help you!

The solution that work for me is the following:
$('#myModal').modal({backdrop: 'static', keyboard: false})
backdrop: disabled the click outside event
keyboard: disabled the scape keyword event

Try this:
<div
class="modal fade"
id="customer_bill_gen"
data-keyboard="false"
data-backdrop="static"
>

if you want to change default:
for bootstrap 3.x:
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
for bootstrap 4.x and 5.x:
$.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.Default.keyboard = false;

Use this if you want to disable the outer click for all modals using jQuery. Add this script to your Javascript after jQuery.
jQuery(document).ready(function () {
jQuery('[data-toggle="modal"]').each(function () {
jQuery(this).attr('data-backdrop','static');
jQuery(this).attr('data-keyboard','false');
});
});

This solution worked for me:
$('#myModal').modal({backdrop: 'static', keyboard: false})
with
data-backdrop="static" data-keyboard="false"
in the button witch launch the Modal

If you are using #ng-bootstrap use the following:
Component
import { Component, OnInit } from '#angular/core';
import { NgbModal } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {
constructor(
private ngbModal: NgbModal
) {}
ngOnInit(): void {
}
openModal(exampleModal: any, $event: any) {
this.ngbModal.open(exampleModal, {
size: 'lg', // set modal size
backdrop: 'static', // disable modal from closing on click outside
keyboard: false, // disable modal closing by keyboard esc
});
}
}
Template
<div (click)="openModal(exampleModal, $event)"> </div>
<ng-template #exampleModal let-modal>
<div class="modal-header">
<h5 class="modal-title">Test modal</h5>
</div>
<div class="modal-body p-3">
<form action="">
<div class="form-row">
<div class="form-group col-md-6">
<label for="">Test field 1</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-6">
<label for="">Test field 2</label>
<input type="text" class="form-control">
</div>
<div class="text-right pt-4">
<button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
<button class="btn btn-primary ml-1">Save</button>
</div>
</form>
</div>
</ng-template>
This code was tested on angular 9 using:
"#ng-bootstrap/ng-bootstrap": "^6.1.0",
"bootstrap": "^4.4.1",

TLDR
backdrop: 'static'
https://getbootstrap.com/docs/3.3/javascript/#modals-options
specify static for a backdrop which doesn't close the modal on click.

none of these solutions worked for me.
I have a terms and conditions modal that i wanted to force people to review before continuing...the defaults "static" and "keyboard" as per the options made it impossible to scroll down the page as the terms and conditions are a few pages log, static was not the answer for me.
So instead i went to unbind the the click method on the modal, with the following i was able to get the desired effect.
$('.modal').off('click');

For Bootstrap 4.x, you can do like this :
$('#modal').data('bs.modal')._config.backdrop = 'static';
$('#modal').data('bs.modal')._config.keyboard = false;

You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})

I was missing modal-dialog that's why my close modal wasn't working properly.

You can also do this without using JQuery, like so:
<div id="myModal">
var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

Add the below css as per you want your screen width.
#media (min-width: 991px){
.modal-dialog {
margin: 0px 179px !important;
}
}