Rails- customize view of confirm dialog box before delete

Question

To delete a record in rails I am using this code

<%= link_to "close #{user.name}'s light", light_path(id: light), method: :delete, data: { confirm: 'Are you sure?' } %>

result of which, I get dialog box like this

But I wants this dialog box to look like this

Is there any way to customize the default view of confirm dialog box?

You cannot actually chenge default look and behaviour of alert or confirm box. You need to use custom jquery plugins — Deepak Mahakale, Oct 23 '17 at 06:52
@DeepakMahakale Do you have any suggestion of custom jquery plugins to use? — Amulya Tanksale, Oct 23 '17 at 07:08
Maybe this [question](https://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery) can point you in the right direction — alex kucksdorf, Oct 23 '17 at 07:19

score 5 · Accepted Answer · edited Oct 24 '17 at 05:09

You can make use of bootstrap modal dialog box, like this:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4

 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
      </div>
      <div class="modal-body">
        Are you sure about closing Ellen's lightbox..
        <%= link_to "Yes", light_path(id: light), method: :delete %>/
        <%= link_to "No", "javascript:void(0)",'data-dismiss': "modal" %>
      </div>
    </div>
  </div>
</div>

And change your initial link to:

<%= link_to "close #{user.name}'s light", "javascript:void(0)", 'data-target': "#myModal", 'data-toggle': "modal" %>

I hope this might be helpful to you.

@AmulyaTanksale If you have find my answer helpful you may also upvote it. I am glad to be helpful :) — Vishal, Oct 24 '17 at 05:05

Rails- customize view of confirm dialog box before delete

1 Answers1

Linked