将 RadDropDownTree 放置在引导模式对话框中答案

【问题标题】：Place RadDropDownTree inside bootstrap modal dialog将 RadDropDownTree 放置在引导模式对话框中
【发布时间】：2014-03-24 14:02:24
【问题描述】：

我正在尝试在引导模式对话框上放置一个 RadDropDownTree telerik Web UI 控件。我遇到的问题是下拉树的过滤文本框，一旦放在对话框，无法接收任何用户输入。请看下面的代码摘录：

<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>

<!-- Button trigger modal -->
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</a>

<!-- 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">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">

            <telerik:RadDropDownTree ID="RadDropDownTree2" runat="server" EnableFiltering="True"  FilterSettings-EmptyMessage="i can't text anything here" >                  
            </telerik:RadDropDownTree>
        </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 changes</button>
        </div>
    </div>
    </div>
</div>

【问题讨论】：

我确实看到你也在 Telerik 论坛 (telerik.com/forums/raddropdowntree-in-bootstrap-modal) 上问过这个问题，但它真的解决了问题吗？我有同样的情况，使用 'visibility:hidden' 而不是类 'hide' 会使代码变得很困难。例如，我不能使用 data-target/data-dismiss 并且不会显示背景。您是否为此找到任何其他解决方案？
@Nurp 我们使用了 Magdalena 在 Telerik 论坛上的帖子中提出的建议。它对我们很有效。

标签： jquery twitter-bootstrap telerik

【解决方案1】：

我详细研究了有问题的场景，发现它与 Telerik DropDownTree 控件无关，因为即使使用标准的绝对定位输入元素也可以重现它。我录制了一段视频，演示了绝对定位输入元素的焦点状态没有被触发，而只是活动的，这会阻止编辑。奇怪的是，在 IE 中用户可以打字，而在 Chrome 和 Firefox 中，他/她是不允许的。

这是视频：http://screencast.com/t/hr5D6j1R77p

这里是标记：

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style>
        input[type=text]:focus {
            background: red !important;
        }
        input[type=text]:active{
            background: green !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <!-- Button trigger modal -->
        <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
        </a>

        <!-- 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">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">

                    </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 changes</button>
                    </div>
                </div>
            </div>
        </div>



        <div style="position: absolute; z-index: 4000; top: 300px; left: 200px;">
            <input type="text" name="name" value=" " />
        </div>


    </form>
</body>
</html>

【讨论】：

如果您不使用绝对定位的文本输入元素，问题不会重现。您是否建议我使用的 Telerik 控件生成绝对定位的输入控件？

【解决方案2】：

从模式中删除tabindex="-1" 将使其工作。

但它也有副作用，不仅使模态的输入可标签，而且页面的所有输入/链接/按钮。

【讨论】：