如何使用jQuery，HTML和使用Twitter的引导框架Twitter的引导框架

Question

IM正确实施confimation窗口和IM有点搞不清triyng正确实施modal（确认窗口）。

的事情是，此刻我的网站呈现一个带有链接的表格，ammong各个环节有一个“删除按钮”，当用户点击它，他们去到另一个页面请求确认，该按钮确认只是像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：$('#modal-from-dom').modal('show');：

<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> 

然后，你可以仅仅通过火起来。关键是，我怎么能ID THE-URL传递到模式，以使其动态，因为在这一点上的模态问我对两个选项（链接，是或否），但链接必须是动态，具有取决于删除按钮（$(#remove_link).attr('id')）谁把它的ID的改变。那我该如何做这项工作？谢谢你的帮助！

Answer 1

查看我创建的示例：http://jsfiddle.net/MjmVr/1/
这并不理想，但要完成这项工作。

Answer 2

你可以用这种方式

使用动态模式假设你有一个标识符i 和每个记录的唯一ID的索引值。

把id值的跨度属性

（我对此进行了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设置。这只是绑定到 每个环节的模式注入检索参数span

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); 
    }); 
});