We Keep Coding

Bootstrap modal popup doesn't work

I have the following code to display a bootstrap modal popup in a webforms application with a master page. This works fine on a small one-page test site. But when I move it to my actual site, somehow the popup doesn't show up. There are no javascript errors for me to debug. I have moved around, the javascript code to master page's head and also the modal popup div to the master page's body. Still the popup doesn't show!
aspx page:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
.vertical-alignment-helper {
display: table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
</style>
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
function btnRedirect_Click() {
window.location.replace("Redirected.aspx?
FirstName = John & LastName = Velu ");
}
</script>
<br/>
<br/>
<div class="row">
<div class="col-md-4">
<asp:Button runat="server" Text="Display Popup" OnClick="OnClick" />
</div>
</div>
<div class="modal fade" id="myModal" data-backdrop="static" data- keyboard="false">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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" style="color: white">
Test</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" Text="Testing..." />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnRedirect" OnClick="Javascript:btnRedirect_Click();">
Redirect</button>
<button type="button" class="btn btn-default" data- dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" style="display: none;" id="btnShowPopup" class="btn
btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</button>
</asp:Content>
Code-behind
protected void btnLogin_Click(object sender, EventArgs e)
{
Response.Redirect("Redirected.aspx");
}
protected void OnClick(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert",
"ShowPopup();", true);
return;
}

bootstrap modal is not displaying as per my requirement

my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<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" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:

Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.

Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
DEMO

Override the width of a modal form MVC/C#

I've got a modal form that is being shared across the application, now I'd like to reuse the same definition for this particular modal but just to override the width. Is there any way of doing this?
<div id="modal-container" class="modal fade">
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body partialContainer" style="max-height: 600px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-submit">Save</button>
</div>
</div>
</div>

Place your model definition in a partial view (_MyModel.cshtml) and replace the width from the dynamic ViewDate and call the partial view by passing the width.
Partial View Code:
<div id="modal-container" class="modal fade">
<div class="modal-dialog" style='#ViewData["width"].ToString()'> -- this style attribute should change whenever gets called on a specific view
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body partialContainer" style="max-height: 600px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-submit">Save</button>
</div>
</div>
Call the above partial view from any view or partial view by passing the width as following
#Html.Partial("_MyModel", new ViewDataDictionary { { "width", "500px" } })
We can also user Model or viewBag to pass data.

Add you own class in you model for which you want to change width
<div id="modal-container" class="modal fade customClass"> // added custom class
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body partialContainer" style="max-height: 600px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-submit">Save</button>
</div>
</div>
</div>
Then add css for that class only
.customClass{
width:400px; // custom width
}

Open different modal box depending on selected row in a gridview

I have a gridview that contain lot of rows, the rows can assume two different meaning. Depending to the meaning of row I need to open a different modal poupup, someone could explain me how to do that?
This is the code of gridview:
<asp:GridView ID="grd_elenco" runat="server" data-toggle="modal" data-target="#myModal1">
this is how I create the modal-box:
<div id="#myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Titolo</h4>
</div>
<div class="modal-body">
<!--my content-->
</div>
<div class="modal-footer">
<asp:Button runat="server" type="button" Text="Chiudi" class="btn btn-default" data-dismiss="modal" />
</div>
</div>
</div>
</div>
So, I need to change programmatically and depending of content of rows the data-target of gridview, is it possible?

I solved my problem with this code:
VB.NET
Private Sub grd_elenco_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grd_elenco.RowDataBound
Dim variable As Integer = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "column_name")) 'take the value from column
e.Row.Attributes.Add("OnClick", "OpenModalBox(" + variable.ToString + ")")
End Sub
Javascript
function OpenModalBox(variable) {
if (variable==0){
$('#mymodal1').modal('show');
} else {
$('#mymodal2').modal('show');
}
}

Open Bootstrap modal from code behind

I am trying to open the bootstrap modal from the code behind. However, when I click the button the alert message comes up but the modal never shows up on the page. I have already looked at other questions but none work for me. Please is there anything that I am missing?
ASPX page
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function openModal() {
alert('hiii');
$('#myModal').modal('show');
}
</script>
<div id="myModal" class="modal fade" role="dialog" runat="server">
<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>
<asp:Button runat="server" ID="btnUploadFile" Text="Upload File" OnClick="btnUploadFile_OnClick" class="btn standard-gradient disabled" />
</div>
</asp:Content>
Code Behind
protected void btnUploadFile_OnClick(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

I have a master page Default.aspx with layout:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap.min.css" />
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<input type="hidden" runat="server" value="" id="hiddenAlert" name="hiddenAlert" clientidmode="Static" />
………….
<div class="modal modalMain fade" id="myModalMain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: hidden;">
<div class="modal-dialog" style="position: relative; top: 25%; left: 0%; width: 300px;">
<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>
</div>
<div id="modalBody" class="modal-body modal-body-main">
...
</div>
<div class="modal-footer" style="margin-top: 0px; padding: 5px; text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
if ($('#hiddenAlert').val() != '') {
$('.modal-body-main').html($('#hiddenAlert').val());
$('.modalMain').modal('show');
}
</script>
</body>
</html>
And in codebedind:
protected void Page_Load(object sender, EventArgs e)
{
………..
string alert = this.Request["alert"];
if(alert == "success")
hiddenAlert.Value = "Data saved successfull";
else
hiddenAlert.Value = "Data saved fail";
}
And in a other page , I have a form and a submit button
<asp:Button ID="btnLuu" runat="server" Text="Lưu" CssClass="input" onclick="btnLuu_Click"/>
In codebedind:
protected void btnLuu_Click(object sender, EventArgs e)
{
….//save your data
//if save successful
Response.Redirect("Default.aspx?Module=" + cModule + "&l=" + language_id + "&p=" + p + "&alert=success");
}
So, you can show any alert content : success, fail or exist data … with a modal pop up for all of pages in your website.