We Keep Coding

Trigger a Bootstrap Modal Pop-up from Code-behind not working

Good day!
I have been following this post for launching a bootstrap modal popup from my code behind but unfortunately it is not working.
Script
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Button
<asp:LinkButton class="alert alert-warning" ID="LinkButton1" runat="server" OnClick="UpdateItem_click" CommandArgument='<%# Eval("Id") %>' >Update</asp:LinkButton>
Code Behind
protected void UpdateItem_click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
Modal
<div class="modal fade" id="myModal" 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">
×
</button>
<h4 class="modal-title" id="myModalLabel">title
</h4>
</div>
<div class="modal-body">
<asp:TextBox runat="server" ID="Username_Update" CssClass="form-control" />
<asp:TextBox runat="server" ID="bookId2" CssClass="form-control" />
<input type="text" runat="server" id="Username_Update2" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
close
</button>
<button type="button" class="btn btn-primary">
save
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
Instead of using a Button just like from the post, I used a LinkButton because I wanted a certain value to be passed in my code behind then select all data needed and populate the modal which will then be launched using this code behind code.
Unfortunately, the modal is not showing and I have no idea whether the code is working properly or not.
Thanks in advance

Ok. I have found the problem. I found out(with the help of a colleague) that my button's OnClick function was not working. Since I have a Validator in my page, I've tried adding each button with this code CausesValidation="false" and now the code works perfectly.

javascript - Bootstrap modal dialog with yes/no not working with imagebutton

I am trying to use ImageButton to fire Bootstrap modal popup but it is not firing for some reason. Please help. Here is my code
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/img/Delete.png" CausesValidation="false" ToolTip="Delete" data-toggle="modal" data-target="#myModal" />
here is my modal popup code
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Delete Confirmation</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</div>
<div class="modal-footer">s
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-default" CausesValidation="false" >
<i aria-hidden="true" class="glyphicon glyphicon-ok"></i>No
</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-primary" CausesValidation="false" >
<i aria-hidden="true" class="glyphicon glyphicon-ok"></i>Yes
</asp:LinkButton>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
here is JS
<script type="text/javascript">
function ShowPopup2() {
$("#btnShowPopup2").click();
}
</script>

Prevent closing Modal from ASP NET Button

For my ASP Webforms Application I use a Modal from Bootstrap for the settings.
<asp:Button CssClass="btn btn-default" data-toggle="modal" data-target="#myModal" OnClientClick="return false;" runat="server" Text="Einstellungen" />
As you can see, I already have to prevent the Button for postback. Because if I click the button the Modal opens, postback starts and the Modal close.
So this problem I fixed.
But now if I open the modal and wanna click a Button in this Modal:
<asp:Button runat="server" ID="dropbox" Text="Mit Dropbox anmelden" CausesValidation="false" OnClick="dropboxButton" CssClass="btn btn-info" />
The Modal close... But I want that the user sees that the Accountinformation from him filled in.
Also I have a field for adding entries after clicking the "+" Button. After every click for adding, the modal will be closed...
I already tried data-backdrop="static" and something with Javascript and e.preventDefault();
Any ideas?

Clicking a server side ASP.NET Button control will cause a PostBack and your page will be re-loaded, therefore the modal will be closed.What you can do is call the code below in the click event to re-open the modal after the click event:
Code behind:
protected void btnClickMe_Click(object sender, EventArgs e)
{
lblTest.Text = DateTime.Now.ToString("dd MMM yyyy - HH:mm:ss");
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}
.ASPX:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
function showModal() {
$('#myModal').modal('show');
}
$(function () {
$("#btnShowModal").click(function () {
showModal();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnShowModal" value="Show Modal" />
<div id="myModal" class="modal fade"">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal popup</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblTest" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="btnClickMe" runat="server" Text="Click Me" OnClick="btnClickMe_Click" />
</div>
</div>
</div>
</div>
</form>
</body>

Why not trying this
<asp:Button ID="btnSpareRequisition" CssClass="btn btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#requestSpareModalId" OnClientClick="return false"/>
Here is my complete code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<%-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>--%>
<asp:Button ID="btnSpareRequisition" CssClass="btn btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#myModal" OnClientClick="return false" />
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Open Bootstrap Modal after input validation after button click in asp.net c#

I am working on a asp.net c# project which has a input box and a button. Input box has some validation and on successful validation I would like to open a bootstrap modal to fill further information. Is there any way to do this?
I tried using the JavaScript but its not working for me. Below is the code for same.
Default.aspx file code:
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />
Bootstrap Modal code:
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
CS Code on button click:
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}

I took your code as is and made the following changes:
Removed data-toggle="modal" data-target="#sell_request" from btnSell
Added CDN references to jQuery,bootstrap.js and bootstrap.css (in that order).
It works now!
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" />
</form>
</body>
Output:

Your bootstrap modal .aspx code looks good as far as I can tell. I am doing something similar, but I have the javascript defined in my .aspx file, and I just call it from code behind using script manager. Here is a sample of my code from default.aspx.cs:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openContactModal();", true);
This calls a java script function that is defined in default.aspx:
<!--Modal Popup for Contacts-->
<script type="text/javascript">
/* Allows us to open and close the Address Book modal from code behind */
function openContactModal() {
$('#contactModal').modal('show');
}
function closeContactModal() {
$('#contactModal').modal('hide');
}
</script>
You can substitute openSellRequest() and #sell_request into this code and see if it works for you.
EDIT: Here is a sample of the default.aspx code for my modals - there are several extra elements in here, although I am not sure that they are required:
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Table ID="contactTable" runat="server" Width="95%">
<asp:TableRow>
... your content here ...
</asp:TableRow>
</asp:Table>
</div>
<div class="modal-footer">
<asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" />
<asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" />
<asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" />
<asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
And here is my button code:
<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />

bootstrap modal dialog box not appearing in ASP.Net

I have a modal dialog box that is supposed to show up, the code is as follows:
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<asp:Button ID="btnSimpan" CssClass="btn btn-success" runat="server" Text="SIMPAN" />
</div>
</div>
</div>
<div id="myModal" class="modal fade in" role="dialog">
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header" style="background-color:red;">
<button type="button" class="close" data-dismiss="modal">&times</button>
<h4 class="modal-title">Makluman</h4>
</div>
<div class="modal-body">
<div role="form">
<div class="form-group">
<h4 class="modal-title">Adakah Anda Pasti ?</h4>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<span class="pull-right">
<asp:Button ID="btnSubmit" CssClass="btn btn-success" runat="server" Text="Ya" /></span>
</div>
<div class="col-sm-6">
<span class="pull-left">
<asp:Button ID="Button1" CssClass="btn btn-danger" runat="server" Text="Tidak" /></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the code simple does nothing, nothing happens when i click btnSimpan button,
like this:
The output is here
looked at many examples on the internet and they all appear the same.I'm guessing I must be missing a something somewhere, unless the error is with my code, any one any suggestions...

Why you need in class for modal? This class will be added when the modal is shown. If the backdrop is only displaying and modal doesn't, please check whether you missed to close any div tags.
Also, why you need to use an Asp.Net server side controll, such as asp:Button to call modal open function? Since you used the button control inside anchor tag which may resulting in a postback event that will reload the page.
You can either use a simple anchor tag with data-target attribute as below:
If you want to trigger the modal open function on asp:button click function, then use ScriptManager.RegisterStartupScript as below on button click event.
<asp:Button ID="btnSimpan" CssClass="btn btn-success" runat="server" OnClick="btnSimpan_Click" Text="SIMPAN" />
c#
protected void btnSimpan_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "<script>$(function () {$('#myModal').modal('show');});</script>", false);
}