如何使用jquery、html和twitter引导框架正确实现确认窗口

我使用twitter引导框架，我有点混淆triyng来正确实现一个（确认窗口）

问题是，在我的站点呈现一个带有链接的表格时，每个链接都有一个“删除按钮”，当用户点击它时，他们会转到另一个页面要求确认，要确认的按钮只是一个类似于

delete.php？ref=The-link

的链接。字符串The-LINK只是jquery传递的唯一id，用于标识要删除的链接：

$('.remove_link').live('click', function(e) {   window.location = 'delete.php?ref=' + $(this).attr('id');  });

好的，现在我不想让用户从表页面转到删除页面，我想使用一个模式。twitter模式工作起来非常简单，只需包含格式的html和javascript：

<script src="JS/jquery-1.7.min.js"></script>
<script src="JS/bootstrap-modal.js"></script>
          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Delete URL</h3>
            </div>
            <div class="modal-body">
              <p>You are about to delete one track url, this procedure is irreversible.</p>
              <p>Do you want to proceed?</p>
            </div>
            <div class="modal-footer">
              <a href="delete.php?confirm=yes&ref=THE-URL" class="btn danger">Yes</a>
              <a href="#" class="btn secondary">No</a>
            </div>
          </div>

删除URL
您将要删除一个跟踪url，此过程是不可逆的

你想继续吗

---

然后您可以通过以下方式启动它：

$（“#modal from dom”）.modal（'show'）。问题是，我如何将id The-URL传递给模态以使其动态，因为此时模态要求我提供两个选项（链接，是或否），但链接必须是动态的，必须根据调用它的delete按钮（
$（#remove_link）.attr（'id'）
）的id进行更改。那么，我如何才能使这项工作？谢谢你的帮助
 检查我创建的示例：

这并不理想，但要做到这一点。
您可以用这种方式使用动态模式

假设您有一个标识符为
i
每个记录都有一个唯一的
ID

将id值放在span属性上

（我用jsp语法展示了这一点）：

  <c:forEach items="${elements}" var="element" varStatus="i">
    <tr>
      <td><c:out value='${element}' /></td>
      <td>
        <div class="center">
        <span id='${element["ID"]}'>
            <a href='#deleteElement' data-toggle="modal" >
              <i class="icon-trash"></i>
            </a>
        </span>
        </div>
      </td>
    </tr>
  </c:forEach>

<form action="/submitUserDeleteUrl" 
      id="submitDelete">       
    <hidden name="id">
    <div id="deleteElement" class="modal hide fade">
      <div class="modal-header">
          <a class="close" data-dismiss="modal" >&times;</a>
          <h3>delete form</h3>
      </div>
      <div class="modal-body">
          <p>do you want to cancel element: </p>
      </div>
      <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#">
        CANCEL
        </a>
        <input class="btn btn-primary" type="submit" value="OK"/>                                                       
      </div>
    </div>
</form>

jQuery('#yourtableid a[data-toggle|="modal"]').on('click', function () {
    var id=jQuery(this).parent('span').attr('id');
    jQuery('#deleteElement').one('show', function () {
        //here made simple, you should append
        jQuery(this).find('.modal-body p').text(id); 
        var action = jQuery(this).parent('form').attr('action');
        //shouldn't because there is a hidden in the form anyway check it out
        jQuery(this).parent('form').attr('action', action+'?id='+id);
    });
});