Menu icon Foundation
Controlling Reveal Modal Placement

I added a model but when it's fired it lands in the flod as show below.
I looked at the CSS line 3361 for .reveal-modal-bg which says z-index: 98
reveal-modal on line 3371 says z-index: 99;
I tried to modify but no joy. is there another control or behavior I need to adjust to make it display window center?

Model

<div class="large-3 columns">
    		<a href="#" data-reveal-id="myModal" class="success button">Free Trial Class</a></p>
				<div id="myModal" class="reveal-modal" data-reveal>
				<h3>Free Trial Class</h3>
				<p class="lead">Free Trial Class</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>
            

         

revealmodal

I added a model but when it's fired it lands in the flod as show below.
I looked at the CSS line 3361 for .reveal-modal-bg which says z-index: 98
reveal-modal on line 3371 says z-index: 99;
I tried to modify but no joy. is there another control or behavior I need to adjust to make it display window center?

Model

<div class="large-3 columns">
    		<a href="#" data-reveal-id="myModal" class="success button">Free Trial Class</a></p>
				<div id="myModal" class="reveal-modal" data-reveal>
				<h3>Free Trial Class</h3>
				<p class="lead">Free Trial Class</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>
            

         

This post has been closed. No new replies can be added.

James Gehring almost 6 years ago

You should be looking for
``` CSS

line 3313

.reveal-modal {
background-color: #FFFFFF;
border: 1px solid #666666;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
display: none;
height: auto;
left: 50%;
margin-left: -40%;
padding: 1.25rem;
position: absolute;
top: 50px;
visibility: hidden;
width: 80%;
z-index: 99;
}

line 3346
.reveal-modal {
padding: 1.875rem;
top: 6.25rem;
}
```
The top property is what controls that, not the z-index. You are also missing the opening p tag on the second line of the code you provided.

Brandon Arnold almost 6 years ago

Not sure why the modal is off center. I copied your code into a new document and it works fine (even removed the extra p tag)

http://cdpn.io/LozEw

My guess it something else on that page it messed up. Can you share a live site with us?

Robert Brown almost 6 years ago

I figured it out. I had the modal within a column DIV so was controlled by the column size. I pulled it out and left the html trigger so now works as expected.