Develop Reference

How the function onhidden works in bootstrap and what it does specifically

Please help me understand how onhidden function work. I read in https://nakupanda.github.io/bootstrap3-dialog/ about it, but did not understand how it works.

they are the events...
in simple words..
onhidden event will be fired when your modal will be gone off the screen.
Onhide event will be fired when modal hide action is done but before closing the dailog.

jQuery link instead of button trigger

So, i have this code snippet that opens a modal:
<button id="trigger-overlay" class="order">Open Overlay</button>
Now, i wanted to include it in Wordpress menu, but i cant add button tag there, so i added:
Open Overlay
And i am using jquery to add a ID to that link, like this:
$('.order').attr('id','trigger-overlay');
ID is added, but link doesnt open anything, aka, it links to "#" instead of opening a modal...
How could i fix this to make it work?
Thanks!

This thing may causing due to events binging order. So, your code $('.order').attr('id','trigger-overlay'); is executing right after click's binding event (I think that event looks like this one: $('#trigger-overlay').click(function() { ... });.
If you have ability to change that binding, please use jquery.on method: http://api.jquery.com/on/
So that code will looks like: $(document).on('click', '#trigger-overlay', function() { ... });.
Also you can just move $('.order').attr('id','trigger-overlay'); above the script with that event binding.

Based on your
<button id="trigger-overlay" class="order>Open Overlay</button>
I'm not sure how you got a modal to trigger, since it is not connected to an event handler like:
<button onclick="turnOverlayOn()">Demo Button</button>
In this case, there would be a function that targets the overlay/modal and turns its CSS display property from none to block or inline-block (however you would like to display it):
var turnOverlayOn = function () {
$('targetOverlayId').css('display','block')
}
I suggest focusing on attaching an onClick event that triggers a function that does what you want to make the overlay appear.
The function used to turn the overlay off could be:
var turnOverlayOff = function () {
$('targetOverlayId').css('display','none')
}
You could attach this to a different anchor tag or button to turn the overlay off.
Note: the event should work the same for an anchor tag as it does for a button.

In my understanding you want to trigger the button click event. Using the a tag with class order.
try
jQuery(document).on('click','.order',function(){
jQuery('#trigger-overlay').click();
});
You can trigger the click event using jquery. Since I have no knowledge of your DOM structure jQuery(document).on('click','.order',function().. will work even if your elements are dynamic (added to the DOM after the script execution) because the click event is bind to the document.
NOTE:
When using wordpress always use jQuery instead of $ to avoid conflicts.

Bootbox 'loaded' callback

Does Bootbox.js have a method for invoking a function upon successfully showing a dialog?
I had originally planned to use it to switch a hidden form from elsewhere in the page into the Bootbox, but that can't be done without a callback or callback analogy. Then I devised a way of moving the hidden form in, and in a forehead-smacking cringe-worthy moment I realized that I still needed a callback (or analogy) to now reveal the form (remove the 'hide' class, add the 'in' class).
The documentation does not seem to show a built in property that will allow me to do this (bootbox.init shows promise, but I don't fully understand it, it is not documented with examples, and it seems to be global. I use many bootboxes). Is there another way I can do this? Does Bootbox publish an event of some sort?

.init() is called on a specific dialog, as I showed someone else here: https://jsfiddle.net/Lu1wp3nn/
A simplified example:
bootbox
.alert('Your message')
.init(function() {
/* do something */
});
Because bootbox.js is just a wrapper over Bootstrap's modals, you have access to the modal events that Bootstrap defines. You're after shown.bs.modal (or show.bs.modal if you want to do something just prior to the dialog being shown).
Here's an example, adapted from the Bootstrap docs:
bootbox
.alert('Your message')
.on('shown.bs.modal', function (e) {
// do something...
})

To general use:
bootbox.alert|confirm({
"title": lang['EMBED'],
"message": content
}).on("shown.bs.modal", function(e) {
alert()
});

How do you think about respective callback for bootstrap modal triggers?

On bootstrap modals, we know that we can bind events for triggers like show or hide using show, shown, hide, hidden, but this event binding only works for general case. What I want is 'specific case' such as:
$("#myModal").modal("show", function(e){
alert("This pops-up after #myModal is shown properly.");
});
or maybe using dictionaries for more options.
Anyway, I want to call some functions as callback after these modal triggers are done.
I do know that there can be alternative implementations, like using setTimeout to wait until the modal is completely shown or hidden, or just unbind the event inside the callback function so the event handler works only for once. Either way, it's not very convenient and ugly.
Can this feature be feasible feature request for bootstrap?
Also, I'm not very satisfied that to change modal's property after its init, I have to change it by directly managing $("#myModal").data("bs.modal").options.
Again, I'm asking about particular situation. I don't want to make callback function called for every show, shown, hide or what ever. Just for specific situation where the modal is triggered manually via javascript.
Here is an example:
Let's say that there are #myModal, and #btn-a, #btn-b.
$(document).ready(function(){
$("#myModal").on("shown.bs.modal", function(e){
console.log("myModal shown.");
})
$("#btn-a").click(function(e){
$("#myModal").modal("show");
});
$("#btn-b").click(function(e){
// There is no such thing like below. It's just pseudo code.
$("#myModal").modal("show", function(e2){
console("myModal shown by b.");
});
});
}
Then if #btn-a is clicked,
myModal shown.
will appear while if #btn-a is clicked,
myModal shown.
myModal shown by b.
will appear.
Again and again, I'm actually not asking how to make it. I already made what I want. What I'm asking is, will this feature be feasible feature request for bootstrap.

Check out the section titled Events here:
http://getbootstrap.com/javascript/#modals
Hopefully, it will give you all the information you need

You can use shown events to detect when the modal has been made visible on the screen:
$('#myModal').on('shown.bs.modal', function (e) {
alert("This pops-up after #myModal is shown properly.");
})
You can check for more information in the events section of modal here.

bootstrap, modal dialogs, shown.bs.modal event doesn't fire

I'm using modal dialog with remote option:
<a target="profile-banner" data-target="#edit-slide-dlg" href="/Banner/SlideEditModal/1/1"
data-toggle="modal" class="banner-slide-control">Edit</a>
Where:
<div id="edit-slide-dlg" class="modal fade" tabindex="-1"></div>
Also, I'm listening for shown.bs.modal event where I use event.target property:
$("body").on("shown.bs.modal", function (event) {
// do something with event.target
}
Some reason this event is not fired when I open dialog for the first time. And it gets fired for the second time only. I tried to browse bootstrap scripts and found this code (see my comment):
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING
})
.emulateTransitionEnd(300) :
that.$element.focus().trigger(e)
So, I turned off transition as a workaround, It made event be fired for the first time, but, event.target is empty string. For the second time event.target contains appropriate dialog HTML. Is this problem with my code or bootstrap?

I had the exact same Problem. I could fix it with the solution to this StackOverflow question: Bootstrap modal 'loaded' event on remote fragment
Basically you have to open the modal manually and implement the Ajax loading yourself. Something like:
$modal.modal({
'show': true
}).load('/Banner/SlideEditModal/1/1', function (e) {
// this is executed when the content has loaded.
});

For anyone coming here late and wading through lots of related issues, this answer from related post solved the OPs issue exactly for me...