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">×</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);
}
Related
I am new to working with Modals. I have 8 Modal setup and working except I need to set the focus to the Text Input when the Modal is displayed. The is what I am using to show the individual Modal.
<div id="WestSide_Modal" class ="container">
<div class ="row">
<div class="col-xs-12">
<asp:Panel runat="server" DefaultButton="btnWest">
<div class="modal" id="viewWestSideModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter You Pin For West Bay</h4>
</div>
<div class="modal-body">
<div>
<label for="inputPinNumber">Pin Number</label>
<br />
<input class="form-control" placeholder="Enter Your Pin #" type="password" id="txtWestPin" runat="server"/>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" CssClass="btn btn-primary" ID="btnWest" Text="Go" OnClick="OpenSelectedForm" />
<button class =" btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</asp:Panel>
</div>
</div>
</div>
I have done some research and I am seeing I need to use a JQuery to accomplish this task below is what I am trying to use for that query.
$(document).ready(function(){
$("#viewWestSideModal").on('shown.bs.modal', function(){
$(this).find('#txtWestPin').focus();
});
});
The page builds and functions but the JQuery is not working so I don't get the focus set to my Input control. What am I missing here?
The 'shown.bs.modal' event isn't fired on the modal itself. You need to attach it to the document. No need to wrap it in $(document).read() and no need to use find() since you're using an id. This should do it:
$(document).on('shown.bs.modal', function(){
$('#txtWestPin').focus();
});
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.
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>
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" />
I am trying to hide a bootstrap alert via JavaScript. I have not been able to accomplish this yet... Here is my code I have :
<div class="bs-example text-center " id="myAlert" runat="server" visible="false">
<div class="alert alert-warning">
×My message here
</div>
</div>
<asp:Button ID="btnClose" data-dismiss="modal" runat="server" Text="Close" class="btn btn-danger" OnClientClick="Clear();"/>
function Clear() {
$(this).closest('#myAlert').hide();
}
try this
$('#myAlert').modal('toggle');