<commit_before><% @side_nav = "js" %>

<div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Reveal" %>
    <div class="row">
      <div class="large-12 columns">
        <h2><%= @page_title %></h2>
        <h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>

        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>

        <hr>

      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">

        <h3>Build With HTML Classes</h3>
        <p>Reveal modals are easy to build, just make sure they live right above your closing <code>body</code> tag or they won't work properly. Follow the markup below to get started:</p>

<%= code_example '
<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>', :html %>

        <p>The class options:</p>
        <ul class="disc">
          <li><code>tiny</code>: Set the width to 30%.</li>
          <li><code>small</code>: Set the width to 40%.</li>
          <li><code>medium</code>: Set the width to 60%.</li>
          <li><code>large</code>: Set the width to 70%.</li>
          <li><code>xlarge</code>: Set the width to 95%.</li>
        </ul>

        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>

        <h5>Firing a Reveal Modal</h5>
        <p>To launch a modal, just add a <code>data-reveal-id</code> to the object which you want to fire the modal when clicked. The <code>data-reveal-id</code> needs to match the <code>id</code> of your reveal.</p>

    <%= code_example '
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>', :html %>

        <p>You can also open and close Reveal via JavaScript:</p>

<%= code_example "
// trigger by event
$('a.reveal-link').trigger('click');
$('a.close-reveal-modal').trigger('click');
", :js %>

        <hr>

        <h5>Default SCSS Variables</h5>

    <%= code_example '
/* We use these to control the style of the reveal overlay. */
$reveal-overlay-bg:      rgba(#000, .45);
$reveal-overlay-bg-old:  #000;

/* We use these to control the style of the modal itself. */
$reveal-modal-bg:        #fff;
$reveal-position-top:    emCalc(15px);
$reveal-default-width:   80%;
$reveal-modal-padding:   emCalc(20px);
$reveal-box-shadow:      0 0 10px rgba(#000,.4);

/* We use these to style the reveal close button */
$reveal-close-font-size: emCalc(22px);
$reveal-close-top:       emCalc(8px);
$reveal-close-side:      emCalc(11px);
$reveal-close-color:     #aaa;
$reveal-close-weight:    bold;

/* We use these to control the modal border */
$reveal-border-style:    solid;
$reveal-border-width:    1px;
$reveal-border-color:    #666;', :css %>

        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p><commit_msg>Update Reveal docs for 4.0.4 functionality.<commit_after><% @side_nav = "js" %>

<div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Reveal" %>
    <div class="row">
      <div class="large-12 columns">
        <h2><%= @page_title %></h2>
        <h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>

        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>

        <hr>

      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">

        <h3>Build With HTML Classes</h3>
        <p>Reveal modals are easy to build, just make sure they live right above your closing <code>body</code> tag or they won't work properly. Follow the markup below to get started:</p>

<%= code_example '
<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>', :html %>

        <p>The class options:</p>
        <ul class="disc">
          <li><code>tiny</code>: Set the width to 30%.</li>
          <li><code>small</code>: Set the width to 40%.</li>
          <li><code>medium</code>: Set the width to 60%.</li>
          <li><code>large</code>: Set the width to 70%.</li>
          <li><code>xlarge</code>: Set the width to 95%.</li>
        </ul>

        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>

        <h5>Firing a Reveal Modal</h5>
        <p>To launch a modal, just add a <code>data-reveal-id</code> to the object which you want to fire the modal when clicked. The <code>data-reveal-id</code> needs to match the <code>id</code> of your reveal.</p>

    <%= code_example '
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>', :html %>

        <p>You can also open and close Reveal via JavaScript:</p>

<%= code_example "
// trigger by event
$('a.reveal-link').trigger('click');
$('a.close-reveal-modal').trigger('click');

// or directly on the modal
$('#myModal').foundation('reveal', 'open');
$('#myModal').foundation('reveal', 'close');
", :js %>

        <hr>

        <h5>Default SCSS Variables</h5>

    <%= code_example '
/* We use these to control the style of the reveal overlay. */
$reveal-overlay-bg:      rgba(#000, .45);
$reveal-overlay-bg-old:  #000;

/* We use these to control the style of the modal itself. */
$reveal-modal-bg:        #fff;
$reveal-position-top:    emCalc(15px);
$reveal-default-width:   80%;
$reveal-modal-padding:   emCalc(20px);
$reveal-box-shadow:      0 0 10px rgba(#000,.4);

/* We use these to style the reveal close button */
$reveal-close-font-size: emCalc(22px);
$reveal-close-top:       emCalc(8px);
$reveal-close-side:      emCalc(11px);
$reveal-close-color:     #aaa;
$reveal-close-weight:    bold;

/* We use these to control the modal border */
$reveal-border-style:    solid;
$reveal-border-width:    1px;
$reveal-border-color:    #666;', :css %>

        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
{'fraction_non_alphanumeric': 0.16714001704061346, 'fraction_numerical': 0.018034649247372907, 'mean_word_length': 3.1872770511296076, 'pattern_counts': {'":': 0, '<': 197, '<?xml version=': 0, '>': 197, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2862798', 'n_tokens_mistral': 2551, 'n_tokens_neox': 2341, 'n_words': 725}