Hi,
I need to use bootstrap's modal and no controls are working inside those modals but of course outside the modals.
I am talking about a very simple one. Let's consider the following:
<!-- Modal --><div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header">...
If I place a button inside a div with the class "modal", add an server side event handler, it never will be triggered when clicked.
Pushing the same button outside the modal works perfectly and the event is triggered.
The same happens to the RadDatePicker: The selected date cannot be used by other controls if the RadDatePicker is in the modal.
I am using Bootstrap v3.3.5 and almost about to despair of this :S
Hope someone can help.
Best regards
5 Answers, 1 is accepted
Rank 1
Can you ensure you are using a common jQuery (version 1.11.1) for the UI for ASP.NET AJAX controls and Bootstrap?
You can also try the example below which works properly on my side with RadButton and RadDatePicker controls when placed inside Bootstrap modal element.
ASPX:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" /> </Scripts> </telerik:RadScriptManager> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Show Model with Button and Picker </button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker> <telerik:RadButton ID="RadButton1" runat="server" Text="click" OnClick="RadButton1_Click" /> <asp:Label ID="Label1" Text="" runat="server" /> </div> </div> </div> </div> </form></body></html>Regards,
Danail Vasilev
Telerik
Rank 1
Thanks for the reply. It works as suggested.
I recognized the errors origin is a 3rd party js library :S
Rank 1
How to open bootstrap modal popup on button click in asp.net c#
Click on the following link
https://youtu.be/qdnKnOHnicw
Hello Hurman,
Thank you for sharing your tutorial with the community.
I would like to add this useful KB article that shows various ways to execute JavaScript code from the server-side:
Regards,
Peter Milchev
Progress Telerik