首先，JavaScript確認不是我在這裏尋找的。請詳細閱讀。即通過傳遞給它的函數將onClick attr放到每個鏈接上，通過提醒正常系統對話框來確認用戶不是我想要的。如果用戶用戶用引導程序對話框確認它，重定向到相應的鏈接

我使用了bootstrap的對話框，而不是系統提供的常規對話框。

這裏有幾個刪除按鈕爲不同的項目

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

下面是顯示使用引導模式的標記。

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

的對話框顯示正確，但我無法重定向相當於上述在對話框中按下刪除鍵後，該模式只dissappears沒有重定向鏈接頁面。

來源

2013-09-22 JayKandari

只需將類別remove-item添加到您的鏈接和此腳本到您的頁面。很好，很乾淨。

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

來源

2013-09-22 10:13:24 ledzep2

OMG，這樣一個簡單的解決方案，這是你的代碼。那爲什麼我沒有想到時間...... :) :) – JayKandari

在引導標記中添加數據屬性並向服務器發送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>

現在使用jQuery或JavaScript，你可以發送一個請求到服務器來執行刪除我所指定爲XXX的data-item操作。

，並動態加入數據項的將是容易的，如果你通過像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 
    }); 
}

現在，你將不得不將其綁定與該鏈接的點擊事件，可容易做這樣 -

$(".remove-item").bind("click", function() { 
    show_dialog_for($this.prop("data-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>

希望這會對你有所幫助。

來源

2013-09-22 09:52:41 Ritesh

Working Demo Here

你需要這段JavaScript代碼添加到您的網頁：

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

這是網頁鏈接：

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

這是模態鏈接：

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

這是模態代碼：

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

你可以看到JSFiddle

來源

2013-09-22 10:29:56 ReDEyeS

如果用戶用戶用引導程序對話框確認它，重定向到相應的鏈接

回答

Working Demo Here

相關問題