agoragames/confirm-with-reveal

Replacement for window.confirm() using the Reveal modal popup plugin from ZURB Foundation.

confirm-with-reveal

Replacement for window.confirm() using the Reveal modal popup plugin from ZURB Foundation.

For maximum “are you really, really sure” protection, the user can optionally be prompted to type out a word or phrase to enable the button to proceed.

Requires jQuery, as well as ZURB’s Reveal plugin.

Integrates with the Rails jQuery UJS adapter if the latter has been included, by overwriting $.rails.allowAction. Simple use of confirm: "Are you sure?" in the link_to helper will use the standard window.confirm() prompt; see CoffeeScript source for full usage details.

Example

See the project page for a demo.

Basic usage

Run $(document).confirmWithReveal() after including this plugin to initialize it. This plugin must be included after jQuery (and if integrating with Rails, after the jquery_ujs plugin as well).

Then simply put a data-confirm attribute on whatever links or buttons you like (e.g. <a href="…" data-confirm>…</a>. You may put this attribute directly on a form element as well to confirm all submissions.

If the data-confirm attribute contains a plain string (e.g. <a href="…" data-confirm="Are you sure?">…</a>), the default $.rails.confirm or window.confirm function will perform the confirmation.

Advanced usage

You may customize the plugin in two ways: in the initialization call (to apply to all instances of confirmation popups on the page) or directly in the individual link or button to be confirmed (for single-use configuration).

The initialization call accepts an options hash, with any or all of the following keys:

• modal_class: CSS class(es) for the modal popup doing the confirmation
• title: Text for title bar of modal popup (default: “Are you sure?”)
• title_class: CSS class(es) for the title bar
• body: Warning inside main content area of popup (default: “This action cannot be undone.”)
• body_class: CSS class(es) for the main warning paragraph
• password: If set, will require the user to type out this string to enable the action (default: none)
• prompt: Format string for password prompt (%s will be replaced by the specified password; default: “Type %s to continue:”)
• footer_class: CSS class(es) for the bottom area containing the buttons
• ok: Label for the button that does the delete/destroy/etc. (default: “Confirm”)
• ok_class: CSS class(es) for the button that does the delete/destroy/etc.
• cancel: Label for the button that cancels out of the action (default: “Cancel”)
• cancel_class: CSS class(es) for the button that cancels out of the action

Example:

$(document).confirmWithReveal({
  ok: 'Make it so',
  cancel: 'Never mind'
})

You may also put a JSON-encoded object in the data-confirm attribute to customize a single confirmation popup. Rails’ link_to helper does the JSON conversion for you automatically; outside of Rails you may need to run to_json or the like explicitly.

Example:

link_to(
  'Danger zone!',
  danger_zone_path,
  data: {
    confirm: {
      ok: 'Yup',
      cancel: 'Nope'
    }
  }
)

Events

The plugin fires two events: cancel.reveal if a confirmable action is cancelled by the user, and confirm.reveal if the user wants to continue. The events are triggered on the link, button, or form containing the data-confirm attribute, and bubble up the DOM hierarchy (so they can be handled on $(document) if desired). At this time, additional confirmation or validation cannot be attached via these events. This is on the roadmap for a future version.

confirm-with-reveal's Issues

Did you just Rick-roll me?

Asshole

Bower package?

Can you please make this a Bower package so that it's super easy to include in a project?

http://bower.io

Execute JS on confirm

I can't seem to figure out if I can provide javascript on confirm, like I would on onclick="execute()".

Rails’ UJS adapter causes confirm loop

When the Rails unobtrusive JavaScript adapter (https://github.com/rails/jquery-ujs) is in place on a page, links or forms with both the data-method and data-confirm attribute (e.g. links that perform a delete) cannot be properly confirmed: a new confirmation modal comes up each time you hit OK on the previous.

Demo page and/or docs outdated

The demo page ( http://blog.agoragames.com/confirm-with-reveal/ ) shows that you can get a reveal-modal with just data-confirm on your link (ie. <a href='/foo' data-confirm>). In the current version, you can't do this, you need to specify <a href='/foo' data-confirm='{}'>.

It looks like it's caused by line 47:

  # The confirmation is actually triggered again when hitting "OK"
  # (or whatever) in the modal (since we clone the original link in),
  # but since we strip off the 'confirm' data attribute, we can tell
  # whether this is the first confirmation or a subsequent one.
  return true if !el_options

The demo page has the JS code of this instead:

if (el_options == null) {
  el_options = {};
}

Either the docs need updating on how you get a no-frills, basic reveal modal or the coffee needs changing to revert to el_options = {}. Or something 👍

Do not work with "build/confirm_with_reveal.js"...

But works correctly with "confirm.js" from the Project Page.
No errors into the console.
Just no confirmation modal, links are followed…

Anyway, thanks for sharing and for the job !

[Question] Return different confirms from one page

Before I start complaining (well, not really): very nice work on this plugin/package. A great replacement for the default JS confirm dialog.
There's something I can't figure out though.

On a page to edit a record (in Laravel 5), I have two options:

• delete an image
• redirect to another page

The first option should launch a confirm-with-reveal stating something like: "Are you sure you want to delete this record? This action cannot be undone."
The second option should launch a confirm-with-reveal stating: "You are about to leave this page. Have you saved you changes?"

Usually, I add a section to the page called @section('revealoptions') which contains a title and body option, extending the rest of the options from another page. However, since I have two options triggered a confirm-with-reveal, I can't use this or it will show the same text for both links.
Adding data-confirm="Text here" doesn't work because that will show the default JS confirm.

Am I missing something?

Return a POST variable on confirm

Hi, great plugin - works so easily.

I often have a number of submit buttons that call the same page which then reads for their POST variable names to determine the right action to take. For example I'm trying to use this on a page where two options are:

form action='/pageref.php' method='post'>
input name="delete" type="submit" class="button small expand alert" value="Delete all data!" data-confirm/>
input name="download" type="submit" class="button small expand success" value="Download all data as CSV">
/form>

pageref.php checks for these with:

if (isset($_POST['delete])) {
...
}
if (isset($_POST['download])) {
...
}

The trouble I'm having is that inserting the data-confirm gives the expected modal dialogue box but when pageref is called the $_POST['delete'] has been lost so I can't confirm the button was pressed. It's become a bit too safe!

Am I missing something obvious or is this a limitation - I could call a different page with this button as a workaround and after performing the action set the headers to the page I want it to go to I suppose.

PS If I use data-value="Do you really want to do this?" so that it uses the window dialogue then the POST variables are set correctly

Foundation 5 support

I can't get this to work with Foundation 5. Has this been used with 5 successfully?

calling confirmWithReveal breaks top menu and dropdown buttons in F5.5.3

If I comment confirmWithReveal top menu and dropdown buttons start to work again.

Normally when I hover over the top menu sub-menu items will start to unveil. After I execute confirmWithReveal sub-menus will not appear any more on hoovering and if I try to click the top menu to see the sub-menu things do not work as expected.

The same is happening with the buttons which have a dropdown icon on the right side. After I execute confirmWithReveal when I try to click the button dropdown the sub-items will bot appear but the main button click will get executed.

If I comment confirmWithReveal top menu and dropdown buttons start to work correctly again.

"Enter" key does not confirm dialog

When the dialog pops up, I want to be able to hit the enter key to confirm it, anyone knows how to achieve this?

Modal does not close on confirm?

Hi,

I've downloaded confirm_with_reveal.js just now and implemented like this:

• Foundation from here: https://packagist.org/packages/bmatzner/foundation-bundle
• script src="/bundles/bmatznerfoundation/js/foundation/foundation.js"></script>
  script src="/bundles/bmatznerfoundation/js/foundation/foundation.reveal.js"></script>
  script src="/bundles/agrihealthahp/js/offlineHandler.js"></script> <-- thats mine
  script src="/bundles/agrihealthahp/js/confirm_with_reveal.js"></script>

•               button data-confirm="{"ok":"Yup","cancel":"Nope"}">Delete /button>
  

I catch the confirm event with:

jQuery('#' + model + '_edit .form_actions.delete').show().on('confirm.reveal', null, { name: model, rowId: rowId }, call.deleteRecord );

which works fine. However the modal does not close, I'm using

jQuery('.reveal-modal').hide();
jQuery('.reveal-modal-bg').hide();

to close it manually.

It is closing on Cancel.

Any idea why this would be happening?

Bower version mismatch

Bower generates a warning that the version in the bower file (0.0.1) is different than the tag (0.0.2):

bower confirm-with-reveal#0.0.2
    mismatch Version declared in the json (0.0.1) is different than the resolved one (0.0.2)

No longer works with Foundation 6

Fails due to Foundation 6 API changes to reveal and calls to foundation(), perhaps others.

Password prompting twice in Foundation 6

https://github.com/ubermanl/confirm-with-reveal (fork of current repos)

An issue I've got on the above though is that password is prompting twice.

OK so I know this is not the right git repos to be posting this issue in but was hoping that maybe agoragames you can pull in ubermanl's changes to make yours F6 friendly ? And then look at the above issue? :D :D

OK Button Does Nothing.

I got everything set up but when I click the OK button. Nothing happens. I don't go to a different page or anything.

I can say I only copied the two JS files from the Build folder over to my sites _js directory. I'm not sure if there were other important files that I missed.

Using FireFox 32.0.3
In Head:

<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel='icon' href='//favicon.ico' type='image/x-icon' sizes='16x16'>
<script src='_inc/foundation/js/vendor/jquery.js'></script>
<link rel='stylesheet' href='_inc/foundation/css/foundation.css' />
<script src='_inc/foundation/js/vendor/modernizr.js'></script>
<script src='_inc/foundation/js/foundation/foundation.js'></script>
<script src='_inc/foundation/js/foundation/foundation.reveal.js'></script>

In Body:

<form action="anotherpage.php" method="post">
<!-- Selections  -->
        <input id="commit" class="button alert" data-confirm type="submit" name="submit" value="Apply Change" />
<!-- Other Buttons -->
</form>

in Footer:

<script src="_js/confirm_with_reveal.js"></script>
<script> 
$(document).confirmWithReveal();
</script>

Using a json object in data-confirm still gives vanilla danger

<a class="delete" href="#" data-confirm="{'title':'This will delete your site. This action cannot be undone.'}"> Delete </a>

Gives me standard vanilla popup (js alert, not the foundation modal) with the contents of the json object:

If I change it to just be a 'data-confirm' in the attribute, it gives me the modal confirm popup (but with default values, no customization).

I would like to use per-element customized modal confirm messages for each link ... but if the above not working I can't :(

make jQuery plugin compatible with jQuery.noConflict();

Wrap jQuery plugin in anonymous function and pass jQuery object. This makes it compatible with jQuery.noConflict();