Fatal编程技术网
  • jquery/
  • Jquery 将RadDropDownTree放置在引导模式对话框中

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

jquery twitter-bootstrap telerik

Jquery 将RadDropDownTree放置在引导模式对话框中,jquery,twitter-bootstrap,telerik,Jquery,Twitter Bootstrap,Telerik,我试图将RadDropDownTree telerik web UI控件放置在引导模式对话框上。 我遇到的问题是，下拉树的过滤文本框一旦放在 对话框，无法接收任何用户输入。请参阅下面的代码摘录： <telerik:RadScriptManager runat="server"></telerik:RadScriptManager> <!-- Button trigger modal --> <a class="btn btn-primary btn-l

我试图将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 DropDownTree控件无关，因为即使使用标准的绝对定位输入元素，它也可以复制。我录制了一段视频，演示绝对定位的输入元素的焦点状态没有被触发，而只有激活的，这会阻止编辑。奇怪的是，在IE中，用户可以输入，而在Chrome和Firefox中，用户是不被允许的

以下是视频：

以下是标记：

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


输入[类型=文本]：焦点{
背景：红色！重要；
}
输入[类型=文本]：激活{
背景：绿色！重要；
}
启动演示模式
&时代；
情态标题
接近
保存更改
从模式中删除
tabindex=“-1”
将使其工作

但它也有一个副作用，即不仅使模态的输入选项卡可显示，而且使页面的所有输入/链接/按钮可显示。

我确实看到你在Telerik论坛（）上也提出了这个问题，但它真的解决了问题吗？我也有同样的情况，使用“可见性：隐藏”而不是类“隐藏”会让代码陷入困境。例如，我不能使用数据目标/数据消除，并且不会显示背景。你找到其他解决办法了吗？@Nurp我们使用了Magdalena在Telerik论坛上的帖子中提出的方法。如果不使用绝对定位的文本输入元素，问题就不会重现。你是说我使用的telerik控件生成绝对定位的输入控件吗？