Following is my jquery code which i am using to display popover . What i wanna do is when a user click anywhere on the screen or on any <span id="close" class="pover"></span> then it hides the current opened popover and show a new popover on which the user clicks on.
As You can see below span which contains class="pover" are being poped up by the following jquery kindly let me know how can i hide the opened popup and display a new one accordingly
Currently, all the popover are getting displayed on click event.
$(document).ready(function() {
$('.pover').each(function() {
//$('#close').popover( "hide" );
$(this).popover({
title: $(this).attr('abc'),
content: $(this).attr('data-content'),
delay: "show",
trigger: "click"
});
});
});
Found this great solution:
Exactly what I am seeking to do.
https://github.com/lecar-red/bootstrapx-clickover
http://www.leecarmichael.com/bootstrapx-clickover/examples.html
Related
Actually I got the popup modal fancy box problem where the popup is not loaded the content properly. The modal div is by default to display none. And I need to show that modal on click event.
I am using the module for AfterPAy payment method where this feature is included. When We click on the learn more button then the popup is open but not the content in that fancy box. I need to make it perfect. This my website URl https://www.tradie.com/tradie-honey-badger-sports-mid-length-trunk-1371.html
(function($) {
$(document).on('ready', function() {
$('.afterpay-what-is-modal-trigger').fancybox({
afterLoad: function() {
$('#afterpay-what-is-modal').css("display", "block");
}
afterShow: function() {
$('#afterpay-what-is-modal').find('.close-afterpay-button').on('click', function(event) {
event.preventDefault();
$.fancybox.close();
})
}
})
});
})(jQuery);
The above js code is in the file of extension modal.js. Here the aftershow function is working, but afterload is not working. Please how that modal will open properly with content.
Thanks.
As per the concern there is a div that is inline set to display none. So when you will hit the link/button then the modal will blanks due to that inline css.
Please find the html of the modal file and add an extra div at the top of that code and set display none to that div inline.
e.g.,
<div style="display:none;">
<div id="afterpay-what-is-modal">
<!--some modal code for popup-->
</div>
</div>
Add a div before the and style it to display none inline that it.
Hope this will work for you.
Alright, so I've got this js code:
jQuery(".toggle-panel").click(function() {
jQuery('#collapsible-element').collapse({
toggle: true,
});
});
I assume it should open and close #collapsible-element but it can only close it. This #collapsible-element has also classes "collapse in" attached by myself in code. With first click on .toggle-panel it closes the #collapsible-element, but the second click does not open it again. Am I missing something?
You don't need any additional JavaScript code for toggle if you are using bootstrap. check out the following:
http://getbootstrap.com/javascript/#collapse
I've been searching SO and the Web for an answer on my issue, but couldn't find anything.
I have appended a reveal modal to the BODY with jQuery. Now when I click on the button which opens the modal, only the overlay is shown. I just can't figure out what is causing the problem.
I have created an example on codepen. http://www.codepen.io/anon/pen/KhsGH
"Open Modal 1" should open the programmatically appended modal.
"Open Modal 2" opens the modal, that is placed directly in the BODY. (This one is just to show that it usually works)
Maybe one of you guys can help me with this.
Thank you very much.
EDIT:
This error is displayed in Firebug:
TypeError: settings is undefined
this.show(modal, settings.css.open);
You have to call foundation after you have appended the modal content div
$(document).ready(function(){
$("body").append('<div class="reveal-modal small foo1" data-reveal><p>Test Reveal</p></div>');
$(document).foundation();
$(document).on('click', '.trigger_foo1',function(e){
e.preventDefault();
$(".foo1").foundation('reveal', 'open');
});
$(document).on('click', '.trigger_foo2',function(e){
e.preventDefault();
$(".foo2").foundation('reveal', 'open');
});
});
I am creating a advertisement Box, as show here http://jsfiddle.net/TFeXY/1/ ,
when user click on button 'Show Ads', 'addBox' get open and he can close 'addBox' div by clicking 'close' button . this all work properly.
but when an user click on close button of 'addbox' before 10 second (say after 3 sec), and click on 'Show Ads' button , 'addBox' doesn't get open instantly . How can i make 'addBox' visible instantly .
here is html portion,
<div id ="addBox" style ="display:none; height:200px; width:200p x; background:red">
advertisment popup
<a id ="Close" syle="float:right;">Close</a>
</div>
<a id="ShowAds">Show Ads</a>
and jQuery portion :
$('#ShowAds').click(function(){
$('#addBox').show(100).delay(10000).hide(100);
})
$('#Close').click(function(){
$('#addBox').hide();
})
use stop()..
$('#clickme').click(function () {
$('#addBox').show(100).delay(6000).hide(100);
})
$('#Close').click(function () {
$('#addBox').stop().hide();
})
however... i have a look to native setTimeout function too. you can cleartimeout by using
clearTimeout();
fiddle here.
You can use .stop on the #clickme:
Demo here
$('#addBox').stop().show(100).delay(6000).hide(100);
I'm having problems getting the SimpleModal jQuery plugin to close when the body is clicked. So far, only the 'X' button works to close it with:
$('a.modalCloseImg').hide();
Here is my code for launching the modalbox. Note that #login-link is the link that opens the box and #login-form is the hidden modal box.
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal();
});
I've tried adding
$("#login-form").modal(overlayClose:true);
but it doesn't seem to be working. (FYI that parameter is per the documentation of the SimpleModal box as seen here.
Try launching the modal box with an additional parameter, like this:
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal({ overlayClose: true });
});
you forgot additional {}.