Rectangle 27 0

I'm using Expressionengine for my project, so I came up with a simple solution. Maybe it will help someone. I have 8 Modals on page and I have 8 conditionals.I guess you can use conditional in channel. :)

{if last_segment == 'Modal8'}  //Modal8 can be changed to any url: latestnews or smth.
$("#Modal8").foundation('reveal', 'open'); 
</script>
{/if}

jquery - How to open Foundation Reveal Modal with hash (#) - Stack Ove...

jquery zurb-foundation reveal.js
Rectangle 27 0

I actually have the same issue and I reported this bug to Zurb. The fix won't be available until version 4.0.9. Currently Foundation's download page allows you to download version 4.0.8. So if you need the fix now you can get it from here.

The issue was that when invoking the close method, they do a toggle on the open modal instead of just hiding it.

UPDATE: You can now download the latest code with the fix for this issue on Foundation's main download page.

jquery - How to make sure that the reveal modal is closed in Zurb Foun...

jquery zurb-foundation
Rectangle 27 0

There is no problem with the code. You can try opening the modal manually using Jquery

<a href="#" class="item" data-reveal-id="292">
<img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg" width="200" height="200">
<div id="292" class="reveal-modal"> <i class="close icon close-reveal-modal">x</i> //x for close button

    <div class="header">Bow tie neck silk overlay top/dress with sequin hem  cream, grey
        <p>0</p>
    </div>
    <div class="content">
        <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
    </div>
</div>
$(document).on('click', '.item', function () {
    var id = $(this).attr('data-reveal-id');
    $('#' + id).foundation('reveal', 'open');
});


$(document).on('click', '.close-reveal-modal', function () {

    $(this).parent().foundation('reveal', 'close');
});

jquery - Foundation reveal doesn't recognise modal link - Stack Overfl...

jquery modal-dialog zurb-foundation
Rectangle 27 0

<div class="row">
            <div class="large-12 columns">
                <div id="myModal" class="reveal-modal">
                  <h2>Awesome. I have it.</h2>
                  <p class="lead">Your couch.  It is mine.</p>
                  <p>Im a cool paragraph that lives inside of an even     cooler modal. Wins</p>
                  <a class="close-reveal-modal">&#215;</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="large-6 columns">
                <div class="panel">
                    <p><a href="#" data-reveal-id="myModal">Open with Data Reveal</a></p>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="panel">
                    <p><a class="foundation-open" href="http://google.com">Open with jQuery</a></p>
                </div>
            </div>
        </div>

And the scripts (notice your script has to be after jQuery and not before otherwise you'll get that error you mentioned)

<script src="js/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>$(document).foundation();</script>
  <script type="text/javascript">
    jQuery(document).ready(function($){
    $('a.foundation-open').click(function(e){
        e.preventDefault();
    $('#myModal').foundation('reveal', 'open');
    });
    });
  </script>

Foundation 4 Reveal Modal with jQuery not working - Stack Overflow

jquery zurb-foundation
Rectangle 27 0

I added position:fixed on .reveal and that seems to have "fixed" the issue for this site.

jquery - Foundation 6 Reveal Modal forcing page to #top - Stack Overfl...

jquery modal-dialog zurb-foundation zurb-reveal
Rectangle 27 0

I decided to stop using the Foundation Reveals native functions and utilize jQuery's ajax to load the content where I needed it.. so, here is what I ended up with:

<a href="javascript:void(0);"
    data-target-url="http://fiddle.jshell.net/revive/mkfty/show/"
    data-modal-title="Contact Information"
    data-modal-class="large"
    data-button-id=""
    data-button-txt="TEST"                      
    class="button bb-modal">Click Me
</a>
<div id="bb-modal" class="reveal-modal" data-reveal>
        <h3 class="modal-title">Information</h3>
        <div class="modal-body"></div>
        <div class="modal-footer"> 
            <button class="btn btn-primary modalsave" id="">Save</button>
        </div>
        <a class="close-reveal-modal"></a>
    </div>

JS CODE FOR MODAL, WITH OPTIONS TO SHOW/HIDE MODAL FOOTER (and there buttons) WITHIN DOCREADY AND AFTER THE FOUNDATION() CALL (also includes js for close modal link in footer since they did away with data-dismiss="modal"):

$('body').on('click','.bb-modal',function(e) {
        e.preventDefault();

        var modal = $('#bb-modal'),
            targeturl = $(this).data('target-url'),
            modaltitle = $(this).data('modal-title'),
            modalclass = $(this).data('modal-class'),
            buttonid = $(this).data('button-id'),
            buttontxt = $(this).data('button-txt');

            //set the text of the modal title
            modal.find('.modal-title').html(modaltitle);

            //add class to modal, if needed, to override modal size/placement
            modal.addClass(modalclass);

            // set the text of the save button
            modal.find('.modalsave').html(buttontxt);

            // set the button.modalsave id so we can target the click function of it.
            modal.find('.modalsave').attr("id",buttonid);  

            if(buttonid != '' || buttontxt != ''){
                modal.addClass('show-footer');
            }

            modal.foundation('reveal', {
                open: function () {    
                    $.ajax({
                        url: targeturl,
                        dataType: "html"
                    })
                    .done(function( html ) {
                        modal.find('.modal-body').html(html);
                    })
                    .fail(function( jqXHR, textStatus ) {
                        modal.find('.modal-body').html( "Request failed: " + textStatus );
                    });
                },
                close: function () {

                }
            }).foundation('reveal','open');

            modal.on('closed', function(){ 
                modal.removeClass(modalclass);                  
                modal.find('.modal-body').empty();
                modal.find('.modal-footer').hide();
                modal.find('.modal-title').html('');
                modal.find('.modalsave').html('Save').removeAttr("id");
            }); // end on close

        }); // end on click

        $('[data-dismiss="modal"]').on('click',function(){
            $(this).closest('.reveal-modal').find('.close-reveal-modal').trigger('click');
        });

jquery - Zurb Foundation 4 Reveal modal - loading modal title, content...

jquery zurb-foundation reveal.js
Rectangle 27 0

I figure that someone here probably knows a much better way to do this, but for the sake of anyone else that is trying to figure this out, I managed to kludge a solution. It works, though I haven't tested it thoroughly.

The function extends Foundation 4 Reveal's functionality in a few ways:

  • Uses WordPress AJAX to dynamically pull in content to populate a modal div.
  • Adds paging navigation from the modal window that when triggered will close the open modal window, then open the previous/next modal content.
(function($) {

    $.fn.displayPost = function() {

    event.preventDefault();

    var post_id = $(this).data("id");
    var id = "#" + post_id;

    // Check if the reveal modal for the specific post id doesn't already exist by checking for it's length
    if($(id).length == 0 ) {
        // We'll add an ID to the new reveal modal; we'll use that same ID to check if it exists in the future.
        var modal = $('<div>').attr('id', post_id ).addClass('reveal-modal').appendTo('body');
        var ajaxURL = MyAjax.ajaxurl;
         $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {"action": "load-content", post_id: post_id },
            success: function(response) {
                modal.empty().html(response).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');
                modal.bind('opened', function() {
                    // Reset visibility to hidden and set display: none on closed reveal-modal divs, for some reason not working by default when reveal close is triggered on .secondary links  
                    $(".reveal-modal:not('.reveal-modal.open')").css({'visibility': 'hidden', 'display' : 'none'})
                    // Trigger resize 
                    $(window).trigger('resize');
                return false;
                });
            }
        });
    }
     //If the div with the ID already exists just open it.
     else {
         $(id).foundation('reveal', 'open');
     }

     // Recalculate left margin on window resize to allow for absolute centering of variable width elements
     $(window).resize(function(){
         var left;
            left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
            $(id).css({
                left:left + $(window).scrollLeft()
            });
     });
    }

     })(jQuery);

     // Apply the function when we click on the .reveal link
     // (document).ready won't work on any reveal-modal divs added subsequently
     // after page load via AJAX so use .on instead.
     jQuery(document).on("click", ".reveal,.secondary", function() {
      jQuery(this).displayPost();

     });

      // Close open modal via secondary paging links; target parent div id.
      jQuery(document).on("click", ".secondary", function() {
        var id = jQuery(this).closest("div").attr("id");
      jQuery(id).foundation('reveal', 'close');
      });
public function __construct() {
        add_action( 'wp_ajax_load-content', array($this, 'load_ajax_content' ));
        add_action( 'wp_ajax_nopriv_load-content', array($this, 'load_ajax_content' ));
    }



        /**
         * Function to call the content loaded for logged-in and anonymous users
        */
        public function load_ajax_content ( $post_id ) {

            $post_id = $_POST[ 'post_id' ];

            if (has_post_thumbnail($post_id)) {
                $sketch_id = get_post_thumbnail_id($post_id);  
                $attachment = get_post( $sketch_id );
                $caption = $attachment->post_excerpt;
                $response = '<figure>'. get_the_post_thumbnail($post_id, 'large-sketch') .'<figcaption><p>'. $caption .'</p></figcaption></figure>' . $this->paging_link_nav( $post_id );
                echo $response;
            }

            die(1);
         }

Hopefully someone else finds this useful...

<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', '_sf' ), the_title_attribute( 'echo=0' ) ) ); ?>" data-reveal-id="<?php the_id(); ?>" data-reveal-ajax="true" "rel="bookmark"><?php the_title(); ?></a>
data-reveal-id
<a href="<?php echo $large_image; ?>" data-id="<?php the_ID(); ?>"  class="reveal" >                       <?php echo get_the_post_thumbnail($post->ID, 'medium-sketch'); ?>
data-id
var post_id = $(this).data("id");
data-id="<?php the_ID(); ?>"

First off, thanks for your help. Much closer now. First, I realized that I needed to localize the script to set the ajax-url. I did that plus change the data attribute as you suggested. Now I get the modal, but no content:(. Also its half off of the left side of the window in Chrome. In Firefox, it just loads the post's page as if none of this is happening, which is very polite of it.

I think that you're on the right track. I updated my code above with and example of my plugin function that loads the AJAX content for the modal. In the function $this->paging_link_nav( $post_id ) refers to a custom paging link function; using next/previous post link plus plugin to create the modal's previous and next links. Not ideal, because it's relying on a plugin, but it was an easy way to add navigation. As far as the centering goes, it may be because there's no content in the div.

jquery - Foundation 4 Reveal and WP AJAX: Previous/Next Modal Window f...

jquery ajax wordpress zurb-foundation
Rectangle 27 0

You need to hook it up during initialization of you reveal, and you need to do it before you initialize the entire library of Foundation.

$('#myModal').foundation('reveal', {    
    closed: function () {
        window.location.replace("http://google.com/");
    }
});
$(document).foundation();

jquery - Foundation Modal window options - Stack Overflow

jquery asp.net zurb-foundation
Rectangle 27 0

Silly mistake on my part. Forgot to initialize foundation first, however it appears you did initialize it. Try wrapping your click JS code inside a $(document).ready();

jquery - Foundation 5 reveal modal opened in javascript can't be close...

jquery zurb-foundation
Rectangle 27 0

$('#mymModal').reveal({
        dismissmodalclass: 'close-reveal-modal' //class name of button to close open dialog
        }
    });

jquery - "Unreveal" modal using Zurb Foundation - Stack Overflow

jquery modal-dialog zurb-foundation
Rectangle 27 0

There is no problem with the code. You can try opening the modal manually using Jquery

<a href="#" class="item" data-reveal-id="292">
<img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg" width="200" height="200">
<div id="292" class="reveal-modal"> <i class="close icon close-reveal-modal">x</i> //x for close button

    <div class="header">Bow tie neck silk overlay top/dress with sequin hem  cream, grey
        <p>0</p>
    </div>
    <div class="content">
        <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
    </div>
</div>
$(document).on('click', '.item', function () {
    var id = $(this).attr('data-reveal-id');
    $('#' + id).foundation('reveal', 'open');
});


$(document).on('click', '.close-reveal-modal', function () {

    $(this).parent().foundation('reveal', 'close');
});

jquery - Foundation reveal doesn't recognise modal link - Stack Overfl...

jquery modal-dialog zurb-foundation
Rectangle 27 0

$('#mymModal').reveal({
        dismissmodalclass: 'close-reveal-modal' //class name of button to close open dialog
        }
    });

jquery - "Unreveal" modal using Zurb Foundation - Stack Overflow

jquery modal-dialog zurb-foundation
Rectangle 27 0

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  $('body').css('overflow', 'hidden');
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
  $('body').css('overflow', 'visible');
});

I also found the on reveal demo page, the overflow is hidden once the modal is opened. I copied the files from the foundation docs and it worked without extra JS code. I created a new CodePen example. http://codepen.io/shoaibik/pen/KzYvNe

That works great in my jsFiddle too! thanks a lot.... @isherwood got me thinking that there might be a better solution that is actually built into the JS foundation library.

I think there might be issues with foundation files you are using, did you used the latest foundation 5?

Yep, 5.5.3 is the latest. View external resources on JSFiddle.

I copied files from the docs page and it worked without extra JS code.

Provide the links to those JS and CSS files please so I can add to the fiddlejs

javascript - How to Add/Remove CSS Overflow to body using jQuery & Zur...

javascript jquery zurb-foundation zurb-foundation-5
Rectangle 27 0

foundation reveal modal by default is responsive and centered... to limit its size to 600px add the following css (after foundation's css):

.reveal-modal{
    max-width:600px;
}

It does not automatically centre vertically though. (see image)

jquery - Centre a reveal modal in foundation - Stack Overflow

jquery css modal-dialog zurb-foundation
Rectangle 27 0

foundation reveal modal by default is responsive and centered... to limit its size to 600px add the following css (after foundation's css):

.reveal-modal{
    max-width:600px;
}

It does not automatically centre vertically though. (see image)

jquery - Centre a reveal modal in foundation - Stack Overflow

jquery css modal-dialog zurb-foundation
Rectangle 27 0

When you are using two different Js libraries conflicts should be there.

jQuery(document).ready(function($) { 

    $("a.button").click(function() { 

   $('#myModal').reveal(); 

      });

   });

no need of prevent default if that button not a submit type one

there was a conflict loading the jquery gallery. Thanks

Foundation 4 Reveal Modal with jQuery not working - Stack Overflow

jquery zurb-foundation
Rectangle 27 0

I'm using Expressionengine for my project, so I came up with a simple solution. Maybe it will help someone. I have 8 Modals on page and I have 8 conditionals.I guess you can use conditional in channel. :)

{if last_segment == 'Modal8'}  //Modal8 can be changed to any url: latestnews or smth.
$("#Modal8").foundation('reveal', 'open'); 
</script>
{/if}

jquery - How to open Foundation Reveal Modal with hash (#) - Stack Ove...

jquery zurb-foundation reveal.js
Rectangle 27 0

You are mistakenly setting the same id on both the <a> and <div> tags.

Your modal has the id 'myModal', so you should set the attribute data-reveal-id='myModal' to your <a> tag. You've instead set id="myModal", which you should remove. The JavaScript you are using should work with this change.

Change the <a> tag's id to id="modalLaucher" and then use:

$("#modalLauncher").click(function (e) {
    $('#myModal').foundation('reveal', 'open');
});

jquery - How to open a Foundation Reveal modal javascript - Stack Over...

jquery modal-dialog zurb-foundation
Rectangle 27 0

$("#myModal").foundation('reveal', 'open');

jquery - Load Foundation modal on page load - Stack Overflow

jquery prototypejs zurb-foundation
Rectangle 27 0

The issue for me was the lack of data-reveal on the modal div, which caused the modal to appear but not be closable either via $('#myModal').foundation('reveal', 'close'); or a .close-reveal-modal link. The comment from Nigel Ingham on the thread you linked to sorted it out. Thanks!

jquery - Foundation 5 reveal modal opened in javascript can't be close...

jquery zurb-foundation