twitter-bootstrap 如果用户用户使用引导对话框进行确认，则重定向到相应的链接

Redirect to the respective links if user user confirms it with a bootstrap dialog box

提问by JayKandari

Firstly, javascript confirm is not what I am looking for here. Please read full. i.e. putting a onClick attr to every link with a function passed to it which confirms the user by alerting a normal system dialog box is not what I want.

首先，javascript 确认不是我在这里寻找的。请阅读全文。即，将 onClick attr 放在每个链接上，并传递给它的函数，通过警告正常的系统对话框来确认用户不是我想要的。

I've used bootstrap's dialog box instead of the regular dialogbox provided by the system.

我使用了引导程序的对话框而不是系统提供的常规对话框。

here are the several delete buttons for different items

这是不同项目的几个删除按钮

<a href="www.mysite.com/product/1" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/2" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/3" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

Below is the markup for showing modal using Bootstrap.

下面是使用 Bootstrap 显示模态的标记。

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger" data-dismiss="modal">Delete</button>
  </div>
</div>

The Dialog box is showing correctly, but I am unable to redirect to page corresponding to the links above after pressing the delete button in the dialog box, the modal just dissappears without redirecting.

对话框显示正确，但在按下对话框中的删除按钮后，我无法重定向到与上述链接相对应的页面，模态只是消失而没有重定向。

回答by ledzep2

Just add the class remove-itemto your links and this script to your page. Nice and clean.

只需将类添加remove-item到您的链接并将此脚本添加到您的页面。漂亮干净。

<script>
$(function () {
  $('a.remove-item').click(function () {
    var url = this.href;
    $('#myModal .btn-danger').click(function () {
      window.location.href = url;
    });
  });
});
</script>

回答by ReDEyeS

Working Demo Here

工作演示在这里

you need to add this javascript code to your page:

您需要将此 javascript 代码添加到您的页面：

    $(".delBtn").click(function() {
        $("#delConfirmBtn").attr("href", $(this).attr("href"));
        $("#delConfirm").modal('toggle');
        return false;
    });

This is the page link:

这是页面链接：

<a href="del_products.html?idproduct=1" class="delBtn btn btn-default">Delete</a>

This is the modal link:

这是模态链接：

<a href="#" id="delConfirmBtn" class="btn btn-danger">Delete</a>

This is the modal code:

这是模态代码：

  <!-- Modal -->
  <div class="modal fade" id="delConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Delete product</h4>
        </div>
        <div class="modal-body">
            <p>Lorem ipsum.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <a href="#" id="delConfirmBtn" class="btn btn-danger"><i class="icon-trash"></i> Delete</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

You can see your code on JSFiddle

你可以在JSFiddle上看到你的代码

回答by Ritesh

In your bootstrap markup add data-attributes and send ajax request to the server, so the items can be deleted without refreshing the page on fly.

在您的引导标记中添加数据属性并向服务器发送 ajax 请求，因此可以删除项目而无需即时刷新页面。

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
    <a class="btn btn-danger" data-action="delete-item" data-item="XXX" data-dismiss="modal">Delete</a>
  </div>
</div>

And now using jquery or javascript you can send a request to server to perform delete operation of data-itemwhat I have specified as XXX.

现在使用 jquery 或 javascript，您可以向服务器发送请求以执行data-item我指定为XXX.

And dynamically addition of data-item will be easy if you will generate it through a javascript method like -

如果您通过 javascript 方法生成它，动态添加数据项将很容易，例如 -

function show_dialog_for(item_id)
{
   //your code here to generate and show the model
   //Bind the ajax method to send the delete request for the item_id
   $("a[data-action]").bind( "click", function() {
      //Send request for deletion
   });
}

Now you will have to bind it, with the click event of that link, can be done easily like -

现在你必须绑定它，使用该链接的点击事件，可以很容易地完成 -

$(".remove-item").bind( "click", function() {
   show_dialog_for($this.prop("data-item"));
});

For the following link - where I have added a class property "remove-item" and data-item with XXX

对于以下链接 - 我在其中添加了一个类属性“remove-item”和带有 XXX 的数据项

<a href="www.mysite.com/product/1" class="remove-item" data-item="XXX" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

Hope this will help you.

希望这会帮助你。