We Keep Coding

ckeditor's popup input fields dont work when used with bootstrap 5 modal (ckeditor 4)

I have come across an error while using ckeditor in bootstrap 5 modal and it looks like it's a very known error and many have given solution for it for different bootstrap versions but i am not able to figure out one for bootstrap 5, please have a look.
Here is the problem with solution:- https://stackoverflow.com/a/31679096
Other similar problems:-
CKEditor Plugin: text fields not editable
Bootstrap with CKEditor equals problems
Mainly what would be the alternative of below line for bootstrap 5. $.fn.modal.Constructor.prototype.enforceFocus
If I search for it in bootstrap 4 js file I'm able to find fn.modal.Constructor in there but not in bootstrap 5. Please if someone can recreate the verified solution in the above link according to bootstrap 5 it would be very appreciated. Thank you for your time.
image describing problem
Also few notes:-
All the other input types like checkboxes and dropdown works but not just text field.
I have also tried removing tabindex="-1" from bootstrap modal code but the problem remains.

Thanks for this. Saved me a lot of head scratching. As of Bootstrap 5.3, this requires a small tweak:
bootstrap.Modal.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };

Not sure if you figured out the answer to this yet, but I've had this same issue with a sweetalert2 modal. I scoured bootstrap's source code and found that you can remove the focus with this:
$.fn.modal.Constructor.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } };
Works as of Bootstrap 5.1.3

Bootstrap does not support nesting modals disabling enforce focus will allow other modals to get focused: <Modal enforceFocus={false}>

On rare occasions a jQueryUI accordion object is undefined

Once in a while our website generates an internal error message about an object being undefined. We are using JQueryUI. Here is an example: "TypeError: X.accordion is not a function". The line of code triggering the error is in a minified version of jquery. The non-minified code looks as follows:
var $help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
We have not been able to reproduce the error, but our production system generates the error several times a week.
You can see the function without having to log in to our website using the following instructions:
https://www.rephunter.net/manufacturers-sales-reps-find
Navigate down to the search box
Click on the spyglass.
On the results page, there is an accordion near the top, left of the page, which shows up briefly, but can be re-opened by clicking on "Show Help for The Page".

Put the script tag at the bottom of your page or in a $(document).ready() :
var $help = null;
$(document).ready(function(){
$help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
});

How to make bootbox closing when using custom dialog

I'm using bootbox to show dialog.
If I use bootbox.confirm, bootbox.alert or bootbox.prompt, when pressing escape key or clicking outside the dialog, the dialog closed as expected
but when using bootbox.dialog, when I click outside the dialog or pressing escape key, the dialog doesn't close, how to make it behave as other dialog do?
var box = bootbox.dialog({
show: false,
backdrop: true,
animate: false,
title: 'Bla',
message: 'bla bla bla',
buttons: {
cancel: {
label: 'Cancel',
className: 'btn-warning'
},
save: {
label: 'Parse',
className: 'btn-success',
callback: function () {
// handling with ajax
return false;
}
}
}
});
box.modal('show');

This should do it. Please note this has only been tested on v3. using bootstrap 2.3.2
$(document).on('click', '.modal-backdrop', function (event) {
bootbox.hideAll()
});

Add an onEscape callback function, which may have an empty body.
See docs and example.
Basic code:
bootbox.dialog({
onEscape: function() {},
// ...
});

To be honest I've never really used modal - it came from a PR a long, long time ago but I've never been convinced of its use case. No good to you now but the method is actually commented as being deprecated in v3.0.0 and will probably actually be removed in future versions - it just doesn't really fit (to me) what Bootbox was created for and as other methods have been tweaked, improved and tested it's sat there somewhat neglected.
But you can do something like this
$(document).keyup(function(e) {
if (e.keyCode == 27) {box.modal("hide");} // esc
});

For those looking to close a single bootbox modal when you have multiple modals open I have found the following to work without breaking the others:
dialog.find(".bootbox-close-button").trigger("click");

In version 3, with dialog, backdrop being true only works when onEscape is true as well - so you just need to set both to true, e.g.
bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

I tried other answers here and they didn't work for me. I'm not sure if it had to do with the specific version of bootbox I was using or some other reason, but I just rolled my own solution to:
only close the last modal that was opened (i.e. for nested modals, don't close all of them)
selectively choose which modals will close on outside click and which will not
work on all of the modal flavors (dialog, alert, confirm etc)
not require me to change libraries or library versions
by doing the following:
function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
d[0].addEventListener('click', function(e) {
if(e.target == d[0])
$(d).modal('hide');
e.stopImmediatePropagation();
return false;
});
}
which is used like so:
var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);

Can we hide all the data before page load using Accordion page type?

In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance

i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.

You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/

Can anyone tell me about a jQuery modal dialog box library that doesn't suck [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
jQuery based modal dialog boxes are great as long as you do as much as the example tells you to. I need a jQuery based modal dialog box library that has to have the following characteristics:
Ideal implementation:
function showDialog(values)
{
processToChangeDom(values);
changeDivTobeDisplayed();
modalDialog.show();
}
It should be fast, something like the add and link dialog on StackOverflow. Most libraries take an eternity to load the dialog with its fancy effects and stuff.
I want to call it using a script. Show a hidden div or a span element inline. MOst of the libraries talk filling an anchor with rel, class and href=#hiddenDiv sort of things. I need to be able to what I want without adding unnecessary attributes to my anchor. Something like this
It should reflect changes I make to the DOM in the hidden Div. I used facebox and found out that it makes a copy of the hidden div and changes to the DOM doesn't reflect on the modal window.
I need to be able call the close modal div using javascript and also attach beforeOpen and afterClose handlers to the action.
Does anyone have any suggestions? I have already tried facebox, simplemodal and a whole range of libraries, most of them don't support one or the other of these functions I described above.

Try SimpleModal. I found it's API quite nice.

Have you looked into jQuery UI? http://jqueryui.com/demos/dialog/

The jQuery UI dialog does pretty much all that you are asking. Also, I haven't noticed that it takes very much time to display. You don't even need to have the DOM element existing to use it. One nice thing about the UI widgets is that you only need to load those components that you need plus the core. They're also widely available via CDN networks, so it's possible that the user's client already has the JS downloaded for it.
$(function() {
$('<div title="I am a dialog"><p>Put whatever you want in here</p></div>')
.dialog({
autoOpen: true,
modal: true,
open: function(event,ui) { ... },
close: function(event,ui) {
...
$(this).dialog('destroy');
}
draggable: false,
resizable: false,
...
})
});

jquery-ui dialog I have found to be light weight and dynamic
here an exmple of how you can use it in a funciton
function display_alert(message,title) {
title = title || "Alert";
$('#alert').text(message); // the message that will display in the dialog
$("#alert").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
title:title,
open: function() {
},
close: function (){
$(document).unbind('keypress');
},
buttons: {
OK: function() {
$(this).dialog('close');
}
}
});
$('#alert').dialog('option', 'title', title);
$("#alert").dialog('open');
}

ThickBox works pretty well, especially if you want to do things like videos or flash inside your modals.

If you happen to be using Twitter's Bootstrap framework then you should check out BootBoxJs.

I've looked into quite a few modal boxes myself, and the best one I came up with is ThickBox. The jquery UI box was ok too, but I did not like the way it handles the back button.
Thickbox covers points 1-3 in your list of requirements. The even handlers could be easily added since the source code is not too complicated.

Try BlockUI. I've found it to be pretty good.