This is a migrated thread and some comments may be shown as answers.

Controls inside Bootstrap's Modal do not work!

5 Answers 1596 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Michael asked on 10 Mar 2016, 12:36 AM

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:

<div id="myModal" class="modal fade" role="dialog">

<div class="modal-dialog">

<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

answered on 14 Mar 2016, 07:23 AM

Hello Michael,

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>

<div id="myModal" class="modal fade" role="dialog">

<div class="modal-dialog">

<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>

</form>

</body>

</html>

Regards,
Danail Vasilev
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.