Changing the text of a twitter bootstrap modal dynamically - javascript

I have a twitter bootstrap modal on a page and it works pretty well. However, sometimes I want to change its caption and body dynamically while it's being shown.
How do I do that?
function showModal(){
$("#ajaxModal").modal({keyboard: false, show: true, backdrop: 'static'});
}
function hideModal(){
$("#ajaxModal").modal('hide');
}
///.............
showModal();
//.........
hideModal();

I had worked on same scenario..here is the example may be it works for you..
This is just sample scenario.. i had find the element in the modal myModal and passed my value, i had passed dynamically 'alertMsg'
$('#myModal').find('p').html('<span style="color:#4F2817;">'+alertMsg+'</span>');

Related

Trouble with Bootstrap Modal

When I hide a modal I have to hide it like so:
$("#finishBillingModal").css("display", "none");
$(".modal-backdrop").remove();
Why?
EDIT
I have found the solution like this:
$(selector).modal({show: true, backdrop: false});
But might be this the correct way ...
Bootstrap modals are supposed to be hidden this way:
$("#finishBillingModal").modal("hide");
as per the v3 docs and the v2.3.2 docs.

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});
try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....
You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>
You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

Bootstrap popover plugin not working

I'm trying to use the Twitter Bootstrap popover plugin to bring up a popover when a <span> element is clicked.
All the files are including on the page, including bootstrap-tooltip.js and bootstrap-popover.js. This is my jQuery code to call the popover:
$('#supported-hosts').popover({
'animation': true,
'html': 'test',
'trigger': 'click'
});
However when I click the element nothing happens. There's no Javascript error in the developer console or anything.
I've also tried doing this to no effect:
$('#supported-hosts').on('click', function() {
$(this).popover('show');
});
I'm pretty clueless as to what's wrong because as far as I can tell from the Bootstrap docs I'm using it correctly.
Edit: Also the HTML is simply a span element:
<span id="supported-hosts">Supported filehosts</span>
In order to show a pop-over, you need to indicate what its content should be.
You can do this on the html tag itself:
<span id="supported-hosts" data-content="Popover content">Supported filehosts</span>
Or with JavaScript:
$('#supported-hosts').popover({
'content': 'Popover content'
'animation': true,
'html': 'test',
'trigger': 'click'
});
By default, the pop-over will use the title attribute of the element that triggers it, so you can use that as well, depending on your needs.

ColorBox Onclose function not working

I am trying to open a new colorbox window when one is closed.
I'm using this code:
$(".inline").colorbox({
inline: true,
width: "50%",
escKey: false,
onClose: function() {
$('#newWindow').show();
}
If there anything wrong with this code?
Description
Assuming your using jack moore's colorbox jQuery plugin you have to change onClose to onClosed and use open:true.
And you always have to close the function.
Check out the jsFiddle Demonstration.
Sample
Html
<div class="firstColorBox">first</div>
<div class="secondColorBox">second</div>
jQuery
$(".firstColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
onClosed:function(){
// open the other colorBox
$(".secondColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
open:true
});
}
});
More Information
jsFiddle Demonstration
jack moore's colorbox jQuery plugin
Update
'onClose' should be 'onClosed'
See the reference here: http://jacklmoore.com/colorbox/
I recommend use the event handlers that come with colorbox:
$(document).one('cbox_closed', function () {
$(".secondColorBox").colorbox({...});
}
This will allow the javascript on the page to run. I was having issues running tags on the second popup and this solved the issue.
The function one will only trigger the event once so you can close the second popup.

jquery fancybox - prevent close on click outside of fancybox

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?
jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.
If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.
There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();
none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)
The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.
Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});
Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api
I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);
Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;

Categories

Resources