CODEWITHSUNDEEP
jquerycssmodal-dialogzurb-foundation
Yahya Uddin
Yahya Uddin

Reputation: 28951

Centre a reveal modal in foundation

I want to centre position the reveal modal in foundation.

http://foundation.zurb.com/docs/components/reveal.html

The I code I used is the following:

#quickViewModal{
  height: 400px;
  width: 600px;
  top: calc( 50% - 200px ) !important;
  left: calc( 50% - 300px ) !important;
  margin: 0 !important;
}

However, this code does not support responsive design. i.e. if the user resizes the window with width 500px lets say, then the modal will be cut off. I also cannot use percentage width.

How can I create a reveal modal that shows and stays at the centre?

UPDATE: it seems that the modal does automatically centre horizontally, but just not vertically.

Foundation Modal not in centre

Upvotes: 3

Views: 2536

Answers (2)

Tomer Almog
Tomer Almog

Reputation: 3868

foundation reveal modal by default is responsive and centered... to limit its size to 600px add the following CSS (after the foundation's CSS):

.reveal-modal {
   max-width: 600px;
}

Upvotes: 0

Gavin Bruce
Gavin Bruce

Reputation: 1809

You can achieve this with the following scss. 

.reveal {
  @include breakpoint(medium) {
    top: 50% !important;
    transform: translateY(-50%);
  }
}

You need to use !important on the top attribute to overwrite the javascript value that foundation sets.

You need to also allow for the breakpoints. On mobile, you want the reveal to be full screen.

It looks like you are not using scss so you would need to have something like. 

@media print, screen and (min-width: 40em) {
  #quickViewModal{
    height: 400px;
    width: 600px;
    top: 50% !important;
    transform: translateY(-50%);
  }
}

Upvotes: 1

Related Questions