Menu icon Foundation
Is a container div for modal mandatory when loading ajax content in modal?

<!-- index.html -->

<div class="row">
    <div class="small-12 columns">
		<p>Here is some text and here is a link to <a href="dialog-content.html" data-reveal-id="myModal" data-reveal-ajax="true">dialog with ajax content</a>.</p>
		
        <!-- Is this <div> mandatory? -->
		<div id="myModal" class="reveal-modal" data-reveal>
		    <!-- Ajax Content -->
		</div>
	</div>
</div>
            

         

<!-- dialog-content.html -->

<div id="content">
    <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>
	<a class="close-reveal-modal">&#215;</a>
</div>
            

         

The code above is the only way I manage to load content with ajax in a modal without writing any additional javascript. Is this how the reveal modal is supposed to work?

A better solution would be to automatically insert a container div with javascript for the content if data-reveal-ajax="true" and load the content into that div.

I'm curious to know why it was not done like that? I do not want to add empty container div elements in my markup just for the modal.

Anyone have any thoughts about this?

reveal modalAJAX

<!-- index.html -->

<div class="row">
    <div class="small-12 columns">
		<p>Here is some text and here is a link to <a href="dialog-content.html" data-reveal-id="myModal" data-reveal-ajax="true">dialog with ajax content</a>.</p>
		
        <!-- Is this <div> mandatory? -->
		<div id="myModal" class="reveal-modal" data-reveal>
		    <!-- Ajax Content -->
		</div>
	</div>
</div>
            

         

<!-- dialog-content.html -->

<div id="content">
    <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>
	<a class="close-reveal-modal">&#215;</a>
</div>
            

         

The code above is the only way I manage to load content with ajax in a modal without writing any additional javascript. Is this how the reveal modal is supposed to work?

A better solution would be to automatically insert a container div with javascript for the content if data-reveal-ajax="true" and load the content into that div.

I'm curious to know why it was not done like that? I do not want to add empty container div elements in my markup just for the modal.

Anyone have any thoughts about this?

herrreiprich about 5 years ago

The div is mandatory and reveal is supposed to work like this ;).

You don't have to put the div into your content area. Just put it to the end of your site before your scripts are loading.

Imho appending the modals to the html with javascript when data-reveal-ajax="true" is not a better solution. You can not decide anymore, where the modals are appended to the DOM. They will appear on a random position, even if you want it or not. Imagine the whole framework does DOM manipulations like this. It's the hell for debugging .