Foundation 5 reveal won't open (Appended to BODY with jQuery) - javascript

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');
});
});

Related

Bootstrap modal over another modal Scrolling problem

So I have created a modal in bootstrap in inside this first modal a place a button for opening a second modal. It works perfectly . But when i close the 2nd modal the first modal scroll doesn't work. Rather if i scroll then the main body scrolled. So How can i solve this.
Add to your jQuery Code
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>

Fancybox modal popup content not loaded properly in magento1?

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.

Fancybox default close does not work after form redirect

I've created my page using bootstrap and have a link to fire off a fancybox box as below:
<a class="iframe" href="AForm.asp?ID=<%=Request("ID")%>"><button class="btn-warning">Action Form</button></a>
JQuery
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
'type' : 'iframe',
'width':500,
'height':500,
'afterClose':function () {
window.location.reload(); }
});
});
</script>
The default functionality works fine to begin with: i can trigger fancybox to load, click the default cross icon and it closes the box - all working as expected.
When i submit a form within the fancybox (html/classic asp) and it does a redirect to a standard HTML page that literally just says "Please close this page" the default close cross icon does nothing. It is visible and in the correct place but there is no click functionality.
I have tried custom close buttons within the HTML page but nothing works - it just doesn't want to close at all. Anyone got any ideas? Thanks
Not so much an answer but after trying to fix this all day i gave up on Fancybox and found Colorbox to work pretty much out of the box for what i was trying to do. Colorbox

Open clue tip on page load javascript

I have used cluetip taken from this location http://plugins.learningjquery.com/cluetip/. I need to open the clue tip when page loads and close the cluetip on clicking the close button.
The html code:
load
<div id="loadme">test content
close
</div>
Now the clue tip opens only on mouse over. I need to open the clue tip when page loads and close the cluetip on clicking the close button.
Yes, your cluetips opens only mouse over, lets call this event!
$(document).ready(function() {
$('.load-local').trigger('mouseover');
});
You can use this following html and jquery
<div class="open">
<p>This the content show on after the page loaded.</p>
<button>close</button>
</div>
$(document).ready(function() {
$("button").click(function () {
$(".open").css("display", "none");
});
});
Here the Demo

jQuery plugin SimpleModal body onclick close not working

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 {}.

Categories