Develop Reference

Popover not opening properly

I am working on a popover code. Which by default works with hover on website. However in the mobile view. Its existing functionality is opening and closing the popover, when we click on the question mark icon. I was trying to close the popover with touch/click event anywhere on the screen with the below code with jQuery.
$('body').on('touchstart', function(e) {
$('[data-toggle="popover"]').each(function() {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
But now when I want to open the popover again, it highlights the question mark icon but doesn't open the popover. It only hovers it. We have to double click to open the popover
<span href="javascript:void(0)" data-placement="top" data-toggle="popover" data-content="Promotions" data-original-title="" title="">
<a class="tool-tip">?</a>
</span>
The first time it works fine but from the second time the double click issue starts. Please help

You can sure find out how to solve your issue in this link How to dismiss a Twitter Bootstrap popover by clicking outside?
Using Bootstrap 4.1:
$("html").on("mouseup", function (e) {
var l = $(e.target);
if (l[0].className.indexOf("popover") == -1) {
$(".popover").each(function () {
$(this).popover("hide");
});
}
});

How to always display Bootstrap 3 modal?

Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.

Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});

Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/

Close any Bootstrap 3 popover with click on any buttons therein?

I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>

Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});

Weird behavior when adding click event to Bootstrap dropdown-toggle

I have a Bootstrap dropdown button with the following markup:
<div class="btn-group dropup">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Test<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Link 1
Link 2
Link 3
</li>
</ul>
</div>
When you click on a.dropdown-toggle, Bootstrap's javascript toggles the ul.dropdown-menu's visibility by adding the class open to the div.btn-group. All this is well and good.
The problem I'm experiencing occurs when I add my own javascript function to the a.dropdown-toggle's click event. Something like this:
$('a.dropdown-toggle').click(function (e) {
e.preventDefault();
$('a.dropdown-toggle').html('Testing...');
});
When I do this something weird happens. When you click the button, it expands the menu as desired EXCEPT when you click directly on the .caret in the button. When you click directly on the .caret, it only executes my click event.
How can I resolve this and have clicks directly on the .caret toggle the menu like clicking anywhere else on the button does.
http://jsfiddle.net/UZkQL/

In your fiddle you have:
$('a.dropdown-toggle').html('Testing...<span class="caret"></span>');
The issue is that you recreate the span element with the carat, which seems to make it not have a click handler bound to it. A quick and dirty fix would be:
$('a.dropdown-toggle').click(function (e) {
e.preventDefault();
if ($('a.dropdown-toggle').text().indexOf('ing...') == -1) {
$('a.dropdown-toggle').find('span').before('ing...');
}
});

Modal (LeanModal) Close by Esc Key

I am using Lean Modal for a Modal on my web app.
Lean Modal Website: http://leanmodal.finelysliced.com.au/
Its all working fine. I just want to add the event "Esc Button Click" which closes the modal. How can I do it? Please advise.

Based on the demos on their homepage, you can close the modal by clicking outside it. You just need to trigger the same click event when ESC key is pressed. This ensures that the closing is actually done by the plugin itself and not by you.
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#lean_overlay").trigger("click");
});

Do something like
$(window).bind('keyup',function(e){
if(e.keyCode == 27)
$('#signup,#lean_overlay').fadeOut();
})
For the example on demo page

<a href id="modal" tabindex="-1" >Click to open </a>
add tabindex="-1" if you are using jquery .