jquery对话框DIV重叠

时间:2018-03-26 05:16:12

标签: jquery

我创建了一个带有锚标记的jquery对话框。当我单击锚标记时,内容将显示在对话框内的另一个div中。但问题是,锚标记上方显示的消息的字体大小会减少。

function OnError(xhr, errorType, exception) {

    $('#dialog-showMsg #sp').empty()
    $("#ExDetails").remove();
    $("#dialog-showMsg").text = " ";

    $("#dialog-showMsg #sp").append("Error something bad happened", "<br/><br/>")
    $("#dialog-showMsg").dialog({

        draggable: true,
        height: 400,
        width: 400,
        show: { effect: "Fold" },
        hide: { effect: "Fold" },
        modal: true,
        open: function (event, ui) {
            "<br />"
            $('<a />', {
                'class': 'DrilldownLink',
                text: 'Error Details',
                href: '#',
                id: 'ExDetails',
                style: "color:blue !important;"
            })
             .appendTo($(".ui-dialog-content"))
              .click(function () {
                  var responseText;
                  $("#dialog").empty("");
                  //$(event.target).dialog('close');
                  $("#dialog").slideToggle();
                  var responseText;
                  $("#dialog").html("");
                  //$("#dialog-showMsg").dialog({ height: 500, width: 500 });
                  try {
                      //$("#dialog-showMsg").append($("#dialog").append("hello moto"));
                      $("#dialog-showMsg").append($("#dialog").append("<b>" + errorType + " " + exception + "</b>"));
                      $("#dialog-showMsg").append($("#dialog").append("<u>Exception</u>:<br /><br />" + responseText.ExceptionType));
                      $("#dialog-showMsg").append($("#dialog").append("<u>StackTrace</u>:<br /><br />" + responseText.StackTrace));
                      $("#dialog-showMsg").append($("#dialog").append("<u>Message</u>:<br /><br />" + responseText.Message));
                  }
                  catch (e) {
                      responseText = xhr.responseText;
                      $("#dialog").html(responseText);
                  }

              })
              return false;
        },
        buttons: {
            'OK': function () { $(this).dialog('close'); }
        }
    });
}

截图:

before click

after click

1 个答案:

答案 0 :(得分:0)

.NET错误页面有一堆嵌入式样式标记,这些标记会混淆您自己的样式。最好的办法是在将返回的内容插入对话框之前从退回的内容中删除样式标记。

这样的事情:

loop

请注意,我没有对此进行测试,因此您可能需要对其进行调整。