Menu icon Foundation
Reveal - Questions On Logic

I am trying to learn the Reveal, and had a question. I want to have a simple modal window for a "Cancel/Delete" action.

I read the documentation and came up with the below code. But I'm not sure how to tie the buttons into actions. For example, if the user selects "Cancel" I want the Reveal to close, which I know is attached to the [reveal].close() action, but I have not figured out how to attach the buttons to the Javascript logic.

Basically, need the following logic

1. Reveal opens
2. User selects "Cancel"
3. Reveal closes

OR
1. Reveal opens
2. User select "Delete"
3. Values are passed to delete record

I tried to demonstrate below in simplified form what I'm running into.

Are there any examples you have that are better methods to achieve this?

Steve

<div id="confirmPlayDelete" data-animation-in="fade-in" data-animation-out="fade-out" class="reveal play-modal" data-reveal>

  <p id="delete-confirm" class="lead">Confirm Delete</p>
  <a id="delete_play_confirm" href="#" class="small hollow button song-button">DELETE</a>
  <a id="cancel_play_delete" href="#" class="small button song-button">CANCEL</a>

  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">X</span>
  </button>

</div>


function OpenDialog(){ 

    //This Opens the dialog
    var modalPopup = new Foundation.Reveal(modal);
    modalPopup.open();
}

function CancelDialog(){

    var cancelDelete = $('#cancel_play_delete');
    ??????

}



         

revealjqueryAJAX

I am trying to learn the Reveal, and had a question. I want to have a simple modal window for a "Cancel/Delete" action.

I read the documentation and came up with the below code. But I'm not sure how to tie the buttons into actions. For example, if the user selects "Cancel" I want the Reveal to close, which I know is attached to the [reveal].close() action, but I have not figured out how to attach the buttons to the Javascript logic.

Basically, need the following logic

1. Reveal opens
2. User selects "Cancel"
3. Reveal closes

OR
1. Reveal opens
2. User select "Delete"
3. Values are passed to delete record

I tried to demonstrate below in simplified form what I'm running into.

Are there any examples you have that are better methods to achieve this?

Steve

<div id="confirmPlayDelete" data-animation-in="fade-in" data-animation-out="fade-out" class="reveal play-modal" data-reveal>

  <p id="delete-confirm" class="lead">Confirm Delete</p>
  <a id="delete_play_confirm" href="#" class="small hollow button song-button">DELETE</a>
  <a id="cancel_play_delete" href="#" class="small button song-button">CANCEL</a>

  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">X</span>
  </button>

</div>


function OpenDialog(){ 

    //This Opens the dialog
    var modalPopup = new Foundation.Reveal(modal);
    modalPopup.open();
}

function CancelDialog(){

    var cancelDelete = $('#cancel_play_delete');
    ??????

}



         
Brian Tan over 3 years ago

Simply add data-close attribute to your CANCEL button. Can do away with the other close-button and CancelDialog.

Use event binding for DELETE button.

$("#delete_play_confirm").on("click", function() {
   // delete action
});