We Keep Coding

Enable actions (click, selecting text, whatnot) outside of bootstrap modal

The default bootstrap modal adds a full page element that when clicking closes it. With data-backdrop="static" data-keyboard="false" you can disable this functionality and so that clicks outside the modal and the esc key do nothing.
I'd like to use a bootstrap modal that allows me to click, select and perform all the normal functions on the page without dismissing it. The only way to dismiss it would be to click buttons on the modal (x or cancel for example).
How can I use a bootstrap modal like that?
<!-- Example modal **without** the functionality I want -->
<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="loadpage" type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>

There were three steps I took to achieve the desired effect. My modal is prepended to the body, the steps may differ if yours is not.
Bootstrap appends a div element to the body (body > .modal-backdrop). It has the styles that cause the white "overlay" effect. This whole element can be deleted or the styles overridden.
A class is added to the body, modal-open. This has the css overflow: hidden;. Either remove that class, or override the css.
The actual modal will also need some css added. width or max-width worked for me. (makes scrolling of the modal work)
#myModal {max-width: 300px;}
Don't make those changes for every modal, use a trigger to restrict them to a specific one.
$("#myModal").on("show.bs.modal shown.bs.modal", function(e) {
// Remove overlay and enable scrolling of body
$("body").removeClass("modal-open").find(".modal-backdrop").remove();
});
The above causes some "flashing" with the removal of .modal-backdrop. If that is unwanted, overriding the styles with css or preventing the default bootstrap action may be best.

I saw no solution for what you ask and I needed to have this feature, I did a function to do that.
It's working with jquery ui draggable element but you can move out any code related to that and it should work as well.
https://jsfiddle.net/wyf3zxek/
modalDraggableClickOutside('#modal-example', 'iframeLoaded', 'Modal shown');
Note that it's not working very well in an iframe (such as js fiddle) : in an iframe you need to move the modale once

Using Intro.js hints on bootstrap modal window, hints displays behind modal

I am using the intro.js "hints" plugin (https://introjs.com/example/hint/index.html, https://introjs.com/docs/hints/api/) on a bootstrap web site. I need the hints to work on bootstrap modals, however the hints are displayed behind the modal window. I tried adjusting the z-index of the .introjs-hint-pulse and the .introjs-hint-dot selectors and the .modal selector with no results.
Any ideas on what I need to do to get the hints to display above the modal window as needed?
I also need to figure out how to hide all of the displayed hints at once, but then be able to show them again when the link is reclicked - like a toggle. I have one icon used to show the hints, and I want to be able to click again to toggle and hide the hints.
I am including links to the hints API, as it shows the options for refreshing and hiding the hints, but I am new to jQuery & JS and am not sure how to get it to work.
Also, I am trying to figure out a way to auto hide the hints on the modal if the modal is closed with them still visible.
I have a jsfiddle with a test modal and the intro.js hints. If you open the modal, then click on the "Show Hints" link, you will notice the hints are not visible. But if you close the modal you can see the hints are visible behind the modal window.
JS Fiddle link: http://jsfiddle.net/1aeur58f/998/
HTML of example:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<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">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="bottom-right-aligned" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The intro.js and introjs.css are linked in the jsfiddle external resources for viewing.

Try with this CSS:
.introjs-hint {
z-index: 9999999 !important;
}
In order to toggle hints you can (for example) do this:
var hints = false;
function toggleHints() {
if (hints) {
$("#txtToggle").html(" Show Hints");
introJs().hideHints();
} else {
$("#txtToggle").html(" Hide Hints");
introJs().showHints();
}
hints = !hints;
}
Check the fiddle updated: http://jsfiddle.net/beaver71/fc0rkakn/

Bootstrap Modal not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->

It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

bootstrap modal example

I am using twitter bootstrap js to implement the modal.....
I used the online example.....
Copied the html, CSS and js code into the fiddle....
but I don't see any output....
http://jsfiddle.net/nJ6Mw/
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>

You're missing something to kick-off the modal. You can either add a link to open it with your modal id referenced in the data-target attribute, or set the href target to be the modal div:
<a role="button" class="btn" data-toggle="modal" data-target="#myModal">Launch demo modal</a>
You can use javascript to setup your Modal div as a modal target, and to open and close it also.
Launch demo modal
...
$('#myModal').modal(options) <-- check the bootstrap site for possible options values.
$('#myModal').modal('show')
$('#myModal').modal('hide')
To make this work, I added the id of myModal to your modal div:
<div id="myModal" class="modal hide fade">
This is all as per the Bootstrap documentation. Maybe take a closer look at it?
Here is a working fiddle from your example. I added the boostrap stuff as external resources. http://jsfiddle.net/nJ6Mw/4/
Edit:
Adding the data-dismiss="modal" attribute will make the close button work.
Close

zclip not working within bootstrap modal

I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
and this is the HTML:
Click here to copy the value of this input:
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">
It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).
How can i get it work?

I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
Attach the zclip to the element inside the modal's 'show' function.
Add a 250ms delay before attaching the zclip to the element
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
JavaScript
$('#myModal').on('show', function () {
$("#modal_body_button").delay(250).queue(function(next){
$(this).zclip({
path: "/static/javascript/ZeroClipboard.swf",
copy: "copied text OK!"
});
next();
});
});

In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)