Question

我正在尝试在Bootstrap模式对话框上放置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>

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

Answer 2

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

但它的副作用还在于不仅可以将模态输入列表，而且还可以显示页面的所有输入/链接/按钮。

将RadDropDownTree放在bootstrap模式对话框中

2 个答案: