Menu icon Foundation
Nesting reveal modals.

Is this possible?

I tried below code, but thirdModal replaces firstModal.
Any suggestions on how to nest modals?

Thanks,
Kiran.

            

<body>
    <!-- Reveal Modals begin -->
    <div id="firstModal" class="reveal-modal" data-reveal>
      <h2>This is a modal.</h2>
      <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
      <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
        <div id="thirdModal" class="reveal-modal" data-reveal>
          <h2>This is a nested modal.</h2>
          <a class="close-reveal-modal">&#215;</a>
        </div>
      <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
      <p><a href="#" data-reveal-id="thirdModal" class="secondary button">Nested Modal...</a></p>
      <a class="close-reveal-modal">&#215;</a>
    </div>
    
    <div id="secondModal" class="reveal-modal" data-reveal>
      <h2>This is a second modal.</h2>
      <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
      <a class="close-reveal-modal">&#215;</a>
    </div>
    
    <!-- Reveal Modals end -->
<div class="row">
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
    <a href="#" data-reveal-id="thirdModal" class="radius button">Example Nested Modal&hellip;</a>
  </div>
</div>
</body>

nestingrevealmodal

Is this possible?

I tried below code, but thirdModal replaces firstModal.
Any suggestions on how to nest modals?

Thanks,
Kiran.

            

<body>
    <!-- Reveal Modals begin -->
    <div id="firstModal" class="reveal-modal" data-reveal>
      <h2>This is a modal.</h2>
      <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
      <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
        <div id="thirdModal" class="reveal-modal" data-reveal>
          <h2>This is a nested modal.</h2>
          <a class="close-reveal-modal">&#215;</a>
        </div>
      <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
      <p><a href="#" data-reveal-id="thirdModal" class="secondary button">Nested Modal...</a></p>
      <a class="close-reveal-modal">&#215;</a>
    </div>
    
    <div id="secondModal" class="reveal-modal" data-reveal>
      <h2>This is a second modal.</h2>
      <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
      <a class="close-reveal-modal">&#215;</a>
    </div>
    
    <!-- Reveal Modals end -->
<div class="row">
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
    <a href="#" data-reveal-id="thirdModal" class="radius button">Example Nested Modal&hellip;</a>
  </div>
</div>
</body>
Rafi Benkual over 5 years ago

There is an example on the docs page.

Kiran Kashalkar over 5 years ago

Rafi,

I have checked the docs but could not find a reference or the example for "nested reveal modals" (modal within a modal)

Can you please point to the exact location?

Thanks,
Kiran.

Rafi Benkual over 5 years ago

It is the first modal example. Here is the working code. http://cdpn.io/ngFcD

Kiran Kashalkar over 5 years ago

Rafi,

That is not a nested modal.
My question asks how to open a modal inside another modal.
In other words, the nested modal should open on top of the container modal.

It can be called stacking I suppose.
An example of a library that provides this is http://awkward.github.io/backbone.modal/

I am trying to get similar functionality from Foundation alone.

Thanks,
Kiran.

Kiran Kashalkar over 5 years ago

Any help/pointers?

Is this possible at all with Foundation alone?

Thanks,
Kiran.

Kiran Kashalkar over 5 years ago

Rafi,

I am assuming nesting is not possible with Foundation alone.
That's too bad as it's making us use a different library. We love Foundation and would've liked to use it alone.

Thanks,
Kiran.

Sebastian Garavano over 5 years ago

Hi Kiran,

Is too late, but I arrive in the post with the same problem.
The solution (for my problem at least) is with some javascript. You have to open the first modal when the second is closed.

Example code:

<a href="#" data-reveal-id="firstModal">Click Me For A Modal</a> 
<div id="firstModal" class="reveal-modal" data-reveal> 
<h2>First Modal!</h2>

<a href="#" data-reveal-id="secondModal">Click Me For A Second Modal</a> 
<div id="secondModal" class="reveal-modal" data-reveal> 
<h2>Second Modal!</h2>
<a class="close-reveal-modal">&#215;</a> 
</div>

<a class="close-reveal-modal">&#215;</a> 
</div>
$(document).on('closed.fndtn.reveal', '#secondModal[data-reveal]', function () {
    $("#firstModal").foundation('reveal', 'open');
});

I hope I have helped,
Sebastian.

dack ragus almost 5 years ago

Sebastian: Super helpful!

It would be nice if "stacked modal" functionality was added. The docs say, "Setting reveal.multiple_opened to true will not close previously opened reveal modals." But I don't know where to set that. I tried everything and it does not work. Anyone have success with it?

Bala Murugan almost 5 years ago

You should specify like the one below and it should stack up the modals.

 $(document).foundation({
        reveal : {
          multiple_opened:true
        }
 });

Lee Davies about 2 years ago

I struggled with this when creating modals via javascript. It seems to be the overlay that is causing the problem, if you stop the second modal having an overlay it positions correctly

You have to nest the modal markup inside the parent markup and turn off the overlay

 

// reveal is not happy about nesting modals, we have to stop a second overlay
var modals = $('div.reveal');
if (modals.length !== 0) {
	dialog.attr('data-overlay', 'false'); //stop overlay
	modals.last().append(dialog); //append inside the parent modal
} else {
	$('body').append(dialog);
}

 

 

Jane Loyal almost 2 years ago

Great insight from you guys here. Nursery Projector