Develop Reference

Bootstrap Popover - JS Trigger

I'm trying to trigger Bootstrap's Pop Over with JS.
I want to be able to change the message and title relative to the link I click.
It works if I actually click the link, but I want to achieve this via Jquery .Click event.
Here is my current JS code:
//Global Tooltip Functionality
$(function () {
$(".tool-tip").on("click",function () {
//Initializes Tooltip
$(function () {
$("#ToolTipContainer").popover();
});
var title = $(this).attr("data-tooltip-title"),
message = $(this).attr("data-tooltip-message");
$("#ToolTipContainer").attr("title", title);
$("#ToolTipContainer").attr("data-content", message);
$("#ToolTipContainer").click();
});
});
Here is my DOM element I am calling function from:
<button type="button" class="tool-tip btn btn-default" data-dismiss="modal" data-tooltip-title="Item Added" data-tooltip-message="Some Message">Continue Shopping</button>
Here is the pop-up container(css hides this, I only want to see the pop-up):
Bootstrap Documentation: Bootstrap PopOver

You can show a tooltip programatically by calling
.popover('show')
$(function () {
$(".tool-tip").on("click",function () {
//Initializes Tooltip
$(function () {
$("#ToolTipContainer").popover();
});
var title = $(this).attr("data-tooltip-title"),
message = $(this).attr("data-tooltip-message");
$("#ToolTipContainer").attr("title", title);
$("#ToolTipContainer").attr("data-content", message);
$("#ToolTipContainer").popover('show');
});
});
Try not hiding the popover container as well, it is most likely hiding your popover.

Close Modal issues

I'm using the following code to open my Modal.
The modal opens as expected - and appends open to the parent class. However, when 'close' is clicked, it doesn't close & close is not added to the class.
Can someone explain why?
<script type="text/javascript">
jQuery(document).ready(function($) {
$window = $(window)
$(".modal-trigger").click(function(e) {
e.preventDefault()
var id = $(e.target).attr("href")
$(id).addClass("open")
$(id).find('.close').click(function(e) {
e.preventDefault()
$(e.target).parent().removeClass(".open")
});
})
});
</script>
My Close button HTML:
<button class="close icon-close"></button>

I don't think that parent() brings you to correct level. Instead try to remove .open class from the element you add this class in the first place, i.e. $(id):
$(".modal-trigger").click(function(e) {
e.preventDefault();
var id = $(e.target).attr("href");
$(id).addClass("open");
$(id).find('.close').click(function(e) {
e.preventDefault();
$(id).removeClass("open");
$(this).off();
});
});
Also you probably want to unbind click event from close button, otherwise it will bind multiple times.

Close javascript popup by clicking anywhere

I am super novice and need a quick advice. I have installed a javascript based popup plugin on my wordpress site, witch opens automatically when somebody visits the site. To close the popup the user will have to click a cross X in the corner of the popup.
I need to edit the plugin so that the user can click ANYWHERE, and the plugin will close.
Here is the javascript code I found. any tips about this?
function open_lightbox(){
//var closebut = (typeof(ujiPopups) !== 'undefined' && ujiPopups != null && ujiPopups.showclose && ujiPopups.showclose == "true") ? true : false;
jQuery("#popup").modal({
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast');
dialog.data.hide();
dialog.container.show('fast', function () {
dialog.data.fadeIn('slow');
});
},
autoResize: false,
autoPosition: true,
escClose: false,
zIndex: 999999,
overlayClose: false
});
}
function popups_close(){
jQuery.modal.close();
jQuery("#popup").remove();
}

Something like this should do it:
$(document).click(function() {
if($('#popup').is(':visible')) {
popups_close();
}
});
If you wish to keep the modal active on interaction with the popup itself:
$(document).click(function(e) {
if (!$(e.target).is("#popup")) {
if ($('#popup').is(':visible')) {
popups_close();
}
}
});
A simple example here: http://jsfiddle.net/wnT4G/
*Check comments for some elegant revisions by #ComFreek

I use a rather strange method, but it works:
$('.click-btn').click(function(){
$('.modal').show(); //show popup
})
$('body').click(function(){
$('.modal').hide(); //hide modal
})
$('.click-btn, .modal').click(function(e){
e.stopPropagation; // don't close modal by clicking inside modal and by clicking btn
})

user event
function addEvent(action) {
$("body").click(function() { action();});
}
function clearEvent() {
$("body").off('click');
}

You want to do this:
$(document).click(function()
{
popups_close();
})
$('Your selector of the popup').click(function(e)
{
e.stopPropagation();
})
.stopPropagation(); Will actually cancel the .click() function that was triggerd by clicking in the document.
So whenever you click anywere in the document the popup will close, except when clicked on the popup itself.
Hope this helped!
jsFiddle

I think you just want to set overlayClose and possibly escClose to true. Your plugin probably creates an overlay on the page so users can't click anywhere else so I'm guessing overlayClose: true will get the plugin to close the dialog when the overlay is clicked.
escClose: true,
overlayClose: true
I'm not sure what plugin you're using, but this one uses a clickClose property.

knockout.js "with" binding and dynamic html

I want to have a modal dialog to appear with some content and buttons inside it. The dialog should be bound to some observable property or not, the dialog also must have close buttons, one inside its body, another on the top right corner. My main aim is to close this modal form with these buttons, but "Cancel" button inside dialog's body doesn't work as expected.
1) First approach:
In this example dialog is created with static dialog, on "Open dialog" button click it shows up, it gets closed if clicked on top right X link, but it doesn't close on "Close" button click, however I set my observable to null. I was pretty much sure about this approach, as it was described in this brilliant explanation.
Excerpt from my code:
HTML:
<button data-bind="click: openDialog">Open dialog</button>
<div data-bind="with: dialogOpener">
<div data-bind="dialog: { data: $data, options: { close: Close } }">
<button data-bind="click: Save">Save</button>
<button data-bind="click: Close">Cancel</button>
</div>
</div>
JS:
self.dialogOpener = ko.observable();
self.openDialog = function () {
var data = {
Save: function() {
alert('Saved');
},
Close: function() {
alert('Closed');
self.dialogOpener(null);
}
}
self.dialogOpener(data);
}
Fully working example:
http://jsfiddle.net/cQLbX/
2) Second approach shows how my dialog html is dynamically created and it has the contents and the same results as in the first example.
Excerpt from my code:
HTML:
<button data-bind="click: openDialog">Open dialog</button>
JS:
self.dialogOpener = ko.observable();
self.openDialog = function () {
var element = "";
element += '<div data-bind="with: $data">';
element += '<div data-bind="dialog: { data: $data, options: { close: Close } }">';
element += '<button data-bind="click: Save">Save</button>';
element += '<button data-bind="click: Close">Cancel</button>';
element += '</div>';
element += '</div>';
var data = {
Save: function() {
alert('Saved');
},
Close: function() {
alert('Closed');
self.dialogOpener(null);
}
}
self.dialogOpener(data);
ko.applyBindings(data, $(element)[0]);
}
Fully working example:
http://jsfiddle.net/6T3Ra/
My question is:
On both examples "Cancel" button inside body doesn't work, the dialog doesn't close, what am I doing wrong and how to solve this?
Thanks a lot!

made a bunch of changes to your fiddle, maybe not how you want to do it, but the cancel and x buttons both do the same thing now
http://jsfiddle.net/cQLbX/3/
<div data-bind="dialog: dialogOpener, dialogOptions: { autoOpen: false, close: Close, buttons: { 'Save': Save, 'Cancel': Close } }">
<div data-bind='with: dialogContent'>
<div data-bind="text: Test"></div>
</div>
</div>
i usually structure my dialogs like this, and i've had success with them.

I don't know if you use any plugins and what not, but looking at your js fiddle example no2 with the help of a great thing called debugger is that you aren't explicitly telling the element to hide. A solution to this could be the following:
//If you look at E, E would be the ViewModel and X would be the jQuery Event Click
Close: function(e, x) {
//from the event we have currentTarget which is the button that was pressed.
//parentElement would be the first element, and the next parentElement was
//the modal in your demo. When we call hide() it hides the modal from
//which the button was pressed.
$(x.currentTarget.parentElement.parentElement).hide();
//left these as is from your example
alert('Closed');
self.dialogOpener(null);
}

How to close an alert box when clicking on it?

Made this custom alert box:
<script type="text/javascript">
$(function () {
var $alert = $('#alert');
if ($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
});
$alert.animate({ height: $alert.css('line-height') || '80px' }, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({ height: '0' }, 200);
});
}
});
</script>
I want it to be open until the user chooses to click on it or anywhere else on the screen. How do I make this happen?

Assuming that clicking anywhere (in, or out, of the alert box itself) is supposed to hide/remove the alert:
$('body').click(
function(){
if ($alert.is(':visible')){
$alert.hide();
}
});
should work, I think.

If you want to justs get rid of it, try calling the hide() function when an onclick event is triggered.
$.click(function() {
$alert.hide();
});

The top answer here is excellent IMO. It covers the part about anywhere else on the screen.
The way to do it is to bind a click event to the body and stop propagation on any event that happens inside the area that isn't supposed to trigger closing the alert.