Menu icon Foundation
How can I close a Reveal Modal with a Button

Is there a way to close a reveal model with a Button?

I have an application where I want to use a Button but when I do it screws up the button formatting.

I use Foundation 4 and CSS.

Thanks in advance,
Bennie

revealbuttonFoundation 4

Is there a way to close a reveal model with a Button?

I have an application where I want to use a Button but when I do it screws up the button formatting.

I use Foundation 4 and CSS.

Thanks in advance,
Bennie

Nick Beresford Davies almost 6 years ago

This did it for me. Include the following link within the modal.

<a href="#" class="close-reveal-modal">Close Window</a>

Ref: https://github.com/zurb/foundation/pull/1381

Bennie Wallace over 5 years ago

Hi Nick

Thanks for the suggestion. Unfortunately that class moves the button to the top right of the modal.

I am trying to keep the button inline with other text.

Has anyone written a css class that close the reveal modal but does not restyle the button?

Rafi Benkual over 5 years ago

I'm still not sure what you mean? Can you post an example?

Here is a demo using the default button class to close the modal http://cdpn.io/jIbpr

Bennie Wallace over 5 years ago

Hi Rafi,

Thanks for the response.

Here is an example

http://www.tapeandmedia.com/basic-page-master.asp

You can open the modal by clicking the "Click Me for a Modal" Button.

Ultimately this modal will contain a form with radio buttons, I will want the user to select one option and then click what is now "Default Button" to 'submit' their selection.

Instead of having the button at the top right, I want it to be in line with the sentence below.

Click Button to Make Your Selection (Button should be here) >

Thanks again and I hope this makes sense.

James Gehring over 5 years ago

on your line 3385 in foundation.css remove the top and right attributes and it should be where you want.

Bennie Wallace over 5 years ago

Hi James,

Thank you very much.

I use reveal modals other places, wouldn't this change all instances?

(Note: I'm not the best at complex css) I created a new class in app.css named ".reveal-modal .close-reveal-modal-button" with the top and right attributtes removed. This places the button in the correct place but it's lost the function of closing the modal.

How can I code this css so it makes this change on a button only?

James Gehring over 5 years ago

OK didn't know you had more than one modal. Remove -button from end of your close-reveal-modal then add this class.

.my-modal{
position: relative !important;
}

also remove the first instance of the close-reveal-modal with the x.

Bennie Wallace over 5 years ago

Hi James,

Works perfectly - Thank you VERY much.

Alejandro Fernandes Antunes almost 3 years ago

I've achieved using a little js:

$('#your-button-id').click(function() {
  $('#your-modal-id').foundation('reveal', 'close');

  return false;
});

seo.melon01 about 1 year ago

Thanks for the good ideas to bring it. I know a lot more. :)

[url=http://www.ufa007.com][color=#e1e1e1][size=1px] พนันบอลออนไลน์[/size][/color][/url]  : J