Question

我使用jQUery UI对话框：http://jqueryui.com/dialog/（我手动添加到preject web Forms .net）以在网页上显示描述文本。这是我目前的代码：

的.aspx：

<CheckBox x:Name="chk" />
<GroupBox>
    <GroupBox.Style>
        <Style TargetType="GroupBox">
            <Setter Property="Opacity" Value="0.6" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsChecked, ElementName=chk}" Value="True">
                    <Setter Property="Opacity" Value="1" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </GroupBox.Style>
</GroupBox>

的.js：

<span id="bullAide" runat="server" class="glyphicon glyphicon-info-sign text-info" style="cursor: pointer;"></span>
<div id="dialog" runat="server" meta:resourcekey="TitreCourriel">
  <p id="txtDescription" runat="server"><%=GetLocalResourceObject("TexteCourriel.Text").ToString()%></p>
</div>

Howerver，我有这个错误：Uncaught TypeError：

$("[id$=dialog]").dialog({
    autoOpen: false,
    position: {
        of: $('#bullAide'),
    },
});
$("[id$=bullAide]").click(function (event) {
    setTimeout(function () { $("[id$=dialog]").dialog("open"); }, 1);
    var position = $(this).offset();
    $("[id$=dialog]").parent().css("left", position.left + 30);
    $("[id$=dialog]").parent().css("top", position.top - 30);
    setTimeout(function () { $("[id$=dialog]").parent().css("width", "auto"); }, 1);
});

我真的不知道出了什么问题！

Answer 1

工作示例：https://jsfiddle.net/Twisty/q0kebgwd/

<强> HTML

<p style="display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent arcu nisi, maximus eget lectus at, egestas pellentesque lectus. Donec varius tristique nunc eu dapibus. Phasellus urna massa, malesuada eu mi eget, vehicula cursus massa. Donec eu fringilla mi. Mauris leo tellus, vestibulum at ex sit amet, aliquam tincidunt lectus. Fusce blandit ex non sapien tempor fringilla. Donec leo ante, faucibus sed suscipit quis, bibendum convallis nulla. Suspendisse blandit dignissim ipsum. Suspendisse consectetur, quam sit amet placerat rhoncus, nisl nunc efficitur magna, ut rhoncus lectus felis ut velit.<span id="bullAide" class="glyphicon glyphicon-info-sign text-info" style="cursor: pointer; margin-left: 3px;"></span></p>
<div id="ContentPlaceHolder1_dialog" runat="server" meta:resourcekey="TitreCourriel">
  <p id="txtDescription" runat="server">This is a test</p>
</div>

<强>的JavaScript

$(function() {
  var $diag = $("[id$='dialog']")
  $diag.dialog({
    autoOpen: false,
    position: {
      my: "left top",
      at: "left+30 top-30",
      of: $("[id$='bullAide']")
    },
  });
  $("[id$='bullAide']").click(function(event) {
    $diag.dialog("open");
  });
});

这将帮助您正确定位对话框。该错误可能是由于缺少父级或在代码中提升DOM的问题。这个剥离的代码应该工作。我还设置了与您的库版本匹配的示例。

jQuery UI：未捕获的TypeError：无法读取未定义的属性“nodeType”

1 个答案: