Asp.net bootstrap modal popup not working correctly

Question

I'm trying to use asp.net grid row button for modal popup, its working for alert but cant call modal popup , how can i fix it?

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

---

 <asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();"
                                                                CssClass="GridDeletebtn" runat="server" />

---

<script>
function test() 
{
    $('#confirm').show();
    alert('df');
}
</script>

Answer 1

When you call, alert('df'), thread will be blocked until you click the "Ok" button of the alert then the postback will happen followed by.

But when you show the modal dialog only (without alert), it won't block the thread and hence postback will happen immediately.

Hence your modal dialogue will be disappeared after postback.

When you add `return false' as below, it will stop the postback.

<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();return false;" CssClass="GridDeletebtn" runat="server" />

Script

<script>
   function test()
            {
                $('#confirm').modal('show');
                //alert('df');
            }
        </script>   

Html

<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>