What is the correct way to incorporate Reveal in a foundation makeup routine?

I've gone through all the steps to make the reveal feature work, including adding modernizr, plugins, and CSS. I've initialized foundation and loaded jQuery correctly. However, I still can't get it to work. What could be missing?

<html>
    <head>
    <script src="js/custom.modernizr.js"></script>
    <script src="js/foundation.min.js"></script>

        <link rel="stylesheet" href="css/foundation.css">
      <link rel="stylesheet" href="css/foundation.min.css">
      <link rel="stylesheet" href="css/normalize.css">

    <script>
      $(function(){
        $(document).foundation();    
      })
    </script>

    </head>
    <body>
    <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 isnside of an even cooler modal. Wins</p>
      <a class="close-reveal-modal">&#215;</a>
    </div>

            <a href="#" class="big-link" data-reveal-id="myModal" id="my-trigger">
                Fade and Pop
            </a>    

    </body>

    <script>
      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

    </html>

Even triggering the modal using $('#my-trigger').trigger('click'); hasn't provided a solution. You can try the suggestions here: Revealing a Modal in Foundation 4

Answer №1

In my setup, I have positioned the javascript code after the footer, except for modernizr. To test if this placement is causing the issue, I created a test page structured similarly to yours. You can try relocating the following code block:

<script src="js/foundation.min.js"></script>

<script>
  $(function(){
    $(document).foundation();    
  })
</script>

Move it just after:

<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to resizing images with next.js

I have an issue with resizing an image within a Bootstrap card using next/image. I am trying to decrease the size of the image to about 60% of its original size and prevent it from filling the entire top portion of the card. I attempted wrapping the imag ...

Tips for enhancing the width of the extrude shape in the x and z axes using Three.js

After creating a shape using extrude geometry, I found that I needed to increase the thickness along the x and z axes. Although I used bevelThickness to increase the thickness along the y axis, I still need to adjust it further. For reference, please see ...

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

extract the information from a specific div on a different website using JavaScript

My goal is to load a specific div with a class="container" from a website and extract its content into my application. Upon making an ajax call to retrieve the site's data, I encountered a cross-domain origin error since I don't have access to t ...

What is the best way to load a partial in Rails asynchronously with AJAX?

I am currently using the following code to load a partial when I reach the bottom of a div containing a table: $(document).ready(function () { $("#pastGigs").scroll(function () { if (isScrollBottom()) { $('#pastGig ...

Gradually reveal each individual path of the SVG, one by one

I am faced with an SVG containing numerous paths like the following: <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://w ...

What if we started using PT as the standard unit for measuring fonts and element size?

Currently, I am in the process of creating a mobile app that will work across different platforms using jQueryMobile and PhoneGap. My initial focus is on developing for Android. When it comes to Android app development, it is recommended that developers u ...

Tips on concealing a div until the value of a specific field surpasses zero

In order to ensure that users focus on the first section of the form before proceeding, I plan to hide the last section until a specific field has a value greater than zero. Check out my HTML code below: <div class="fieldcontainer"> <label>E- ...

How can I maintain circle radius while resizing SVG to 100% width?

Our line graphs are drawn using SVG technology: https://i.stack.imgur.com/PLpPT.png When generating SVG, the width is set to 100%, but the exact value remains unknown. To ensure that the SVG fills the entire width without distortion, we use preserveAspec ...

Arrange the HTML DOM elements in the order of their appearance in a list

Is it possible to rearrange the order of <div> and its elements based on database information? For example, consider the following HTML structure: <div id="container"> <div id="A"> Form elements for A</div> <div id="B"& ...

Can a border-bottom be made the same size as a class it is not linked to in CSS?

Can I set a border-bottom to match the size of a separate class? For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width. Each < ...

Updating a segment of a query string using Jquery

I'm currently facing a challenge when it comes to updating a specific part of a query string using jQuery. Whenever the user moves away from the input field, I need to remove the search_rad section of the query string to prevent duplicates from occurr ...

Rotating a CSS div causes the page to scroll horizontally

Currently, I am working on creating a unique design for the footer of my website. However, when implementing it, I encountered an issue that is causing a horizontal scroll (red background added for clarity). https://i.sstatic.net/K4vnV.jpg To address thi ...

Is Laravel compatible with jQuery AJAX for uploading files?

For the past week, I have been struggling to complete this task with no success. The issue lies in the fact that users are unable to upload a file to the server due to AJAX not sending any data. Below is the form where users can upload a file: &l ...

Is there a way to assign the value of a textfield to a session attribute in JSP prior to rendering?

Imagine I have the following code snippet: <html> <head> <script> function setSession() { var roll=document.getElementById("rollno").value; session.setAttribute("rollno", roll); } & ...

jQuery - How come my string values are getting cut off?

It's been a while since I last worked with jQuery, and I seem to be missing something obvious that's affecting my calculations. I have various text boxes for Weight, Moisture %, and Number of Filled Squares, as well as a multi-select option for ...

Reduce the width beyond the necessary limit

I'm struggling to adjust the width of an image to match it with the card size without stretching it or breaking the layout. Most solutions I've come across recommend using inline-block, but this doesn't work well for smaller images. It seems ...

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Within different sections of my website, we display banner ads that are loaded in real-time from third-party sources and come in various sizes. I'm interested in adding a transparent overlay image to each ad which would allow me to trigger a click ev ...

Tips for preserving cropped images

Obtained the code for cropping images from this specific link: The code snippet provided in the crop.php file is as follows: <?php /** * Jcrop image cropping plugin for jQuery * Example cropping script * @copyright 2008-2009 Kelly Hallman * More ...

Aligning a number in the center both vertically and horizontally within a div that is inside a table-cell

Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...