I am trying to refresh the content of the popover. I know the content gets updated when i click the button, however, its not showing on the already opened popover..
$('#popOverPr')
.popover(
{
animate : false,
html : true,
offset : 10,
placement : 'bottom',
template : '<div class="popover popOverProgress" "><div class="arrow" style="left:80%";></div><div class="popover-inner"><h3 class="popover-title" style="display:none;"></h3><div class="popover-content"><p></p></div></div></div>',
content : function() {
return $('#popOverPr-content').html();
}
$('#popOverPr').popover('show');
$('.popoverButton').on('click', function() {
//if(........)
$('#popOverPauseText').text("Resume");
// else
$('#popOverPauseText').text("Start");
}
});
You can destroy the popover, recreate a new one with different content
Related
I am trying to insert a link in froala editor. but when i click on link (froala as shown in screenshot) , i do not get sub menu options like open /edit/insert/unlink .
My froala editor opens in a div as a modal-dialog (bootstrap class) .I have included link.min.js plugin in my file
I am doubting if we can open a popup ( sub menu options from froala) inside a parent popup window ( div popup)?
<div class="modal" id="modalDivAddEvent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
<script>
$(document).ready(function () {
var contents = document.getElementById('form-edit:code').value;
$('#froala').froalaEditor({
placeholderText: 'Start creating your page',
quickInsertTags: [],
height: 300,
heightMin: null,
heightMax: null,
contenteditable :true,
linkAlwaysBlank : true
});
$('#froala').froalaEditor('html.set', contents);
});
</script>
I expect the sub menu to be shown on div popup but it is not
working image
not working image
If you are loading froala inside a boostrap/modal popup then the dialog popups created by froala may loaded behind your boostrap/modal popup. You have to use zIndex property - https://www.froala.com/wysiwyg-editor/docs/options#zIndex
<script>
$(document).ready(function () {
var contents = document.getElementById('form-edit:code').value;
$('#froala').froalaEditor({
placeholderText: 'Start creating your page',
quickInsertTags: [],
height: 300,
heightMin: null,
heightMax: null,
contenteditable :true,
linkAlwaysBlank : true,
zIndex:2501
});
$('#froala').froalaEditor('html.set', contents);
});
</script>
You have to remove tabindex="-1" from modal and need to add zIndex property to froala-editor
var froalaSettings = {
zIndex: 2000,
}
I am using bootbox and I have a button on my modal which is when clicked, it opens another modal. The problem is that when the new modal is opened, the modal behind it does not become dim. Instead, the background behind the two modals just gets dimmer. What should I do to fix it?
Here is my sample code:
$('#new-btn').click(function () {
new_room_form = bootbox.dialog({
title: "New room",
message:
'<div class="row">' +
'<div class="col-md-12">' +
'<form>' +
'<fieldset style="padding: 20px">' +
'<legend>Example:</legend>' +
'<div class="form-group">' +
'<button class="btn btn-primary" id="add">Add</button>' +
'</div>' +
'</fieldset>' +
'</form>' +
'</div>' +
'</div>',
buttons: {
cancel: {
label: "Cancel",
className: "btn btn-default"
},
add: {
label: "Add",
className: "btn btn-primary",
}
}
}); // end bootbox dialog
$('#add').on('click', function(response) {
bootbox.alert("Hello world!", function() {
});
return false;
});
});
Bootbox is mostly just a wrapper/helper library intended to make Bootstrap modals easier to use. As such, it has all of Bootstrap's limitations, which includes:
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing
more than one modal at a time requires custom code.
http://getbootstrap.com/javascript/#modals
In a nutshell, you would have to handle this yourself. What you're seeing is likely a result of the absolute positioning and z-index values being the same for the overlays.
At the moment, I'm not aware of anything in Bootbox or Bootstrap that lets you directly manipulate the modal's backdrop. The closest you get is an option to disable the backdrop, which you do by passing backdrop: false as one of the options.
Good answer from here: https://newbedev.com/multiple-modals-overlay
and here: Multiple modals overlay
Add this script to your HTML:
<script type="text/javascript">
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
</script>
Explanation:
On the modal shown event the script gets a count of the shown modals and then calculates and applys a zindex for this modals backdrop as (1040 + (10 * n)) where n is the number of open modals. The setTimout is used due to timings in the creation of the elements.
A way I took care of this is overriding the z-index of the bootbox modal and modal backdrop to be on top of the standard modal z-index of 1050.
I added two css classes:
.bootbox.modal {
z-index: 1070 !important;
}
.modal-backdrop.bootbox-above-modal {
z-index: 1060 !important;
}
I then disabled the default bootbox modal backdrop and added my own modal backdrop using jquery:
bootbox.dialog({
message: 'My alert!',
backdrop: false,
onShow: e => $('body').append('<div class="modal-backdrop fade show bootbox-above-modal"></div>'),
onHide: e => $('.modal-backdrop.bootbox-above-modal').remove()
})
I have fancybox 2.1.5 and have built a page with 4 different links to open a fancybox popup. I have also added a setTimeout for these popups so that after a set amount of time, the popup will automatically go away.
The issue is that when I open a popup, manually close it, and then click on a popup, randomly between 1 to a few seconds, it will close itself (I have it set to 15 second timeout). I don't know if this is caused by having multiple popup links, or what. Below is the code I used:
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow: function(){
this.title = $(this.element).next('.newTitle').html();
},
width : '700',
height : '380',
closeBtn : false,
helpers : {
overlay : {
css : {
'overflow' : 'hidden',
'background' : 'rgba(0,0,0,0.85)'
}
}
}/*,
afterLoad: function(){
setTimeout( function() {$.fancybox.close(); },15000);
}*/
});
});
And the HTML:
<a class="fancybox fancybox.iframe" href="includes/elevator.html"><img src="images/elevator.gif" class="round" width="324" height="183"/></a>
I am using jQueryUI and I have a web page with a few links that when clicked will display a modal window. The issue i am having is that when i click one of the links that has a button then close it and click another link that doesnt have buttons the modal launches but the buttons are still there. Despite the fact that no buttons are being specified. I have tried to use the close property when creating the dialog calling $(this).dialog("close") doesnt solve the issue. Calling $(this).dialog("destroy") solves the issue except that the contents of the modal are then shown on the webpage.
This is the function I call to launch the modal.
General.modal = function(options)
{
if(!options.hasOwnProperty(modal))
{
options.modal = true;
}
$('#modal').dialog(options);
};
This is the call without buttons.
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
});
This is the call to that function with buttons:
myApp.General.modal({
title : "Upload Documentation (" + groupTitle + ")",
height : 500,
close: function(){$(this).dialog("close");},
width : 600,
buttons : {
"Upload" : jQuery.proxy(directoryView.uploadClicked, directoryView, model.get("gid"))
}
});
I presume that the dialog is not being destroyed so the last button definition is staying around. You probably need to ensure the buttons attribute is null on subsequent calls:
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
buttons : null,
});
I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.
Hovering over the items some information appear. That works until I use the paginator to go to the next page.
The pagination reloads the content. But it has the same structure as when I refresh the page.
Here's my code:
$(document).ready(function() {
$(".cornerize").corner("5px");
$('a#verd').live('click', exSite);
$("a.tp").live('click', thumpsUp);
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
$('a.ppname[rel]').each(function(){
$(this).qtip( {
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
}
});
});
});
The html/dom does not change:
<a class="ppname" rel="link" href="#">...</a>
qTip takes from every a.ppname the rel value end loads the content.
This is happening because new elements are not automatically "qTiped" when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().
This has been solved before (judging from the comment): Problem with qTip - Tips not showing because elements load after the script.
The correct way to do it is (from that answer):
$('a.ppname[rel]').live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip({
overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
show: {
ready: true // Needed to make it show on first mouseover event
},
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
});
target.trigger('mouseover');
});