使用JQuery创建和显示Div而不会扭曲其他元素

Question

我正在尝试创建一个div并在那里显示超时消息。但它实际上扭曲了Page的其他部分。例如见下文。 Session Timed out是带有消息的div。

现在我不希望这种情况发生。 PFB我用来创建这个Div的JQuery代码

function ShowSessionTimeOutDiv() {
        var styler = document.createElement("div");
        styler.setAttribute("style","font-size:15px;width:auto;height:auto;top:50%;left:40%;color:red;");

        styler.innerHTML = "<b><i>Session TimedOut, Please refresh the Page</i></b>";
        document.body.appendChild(styler);

        var currentDiv = $('#GoToRequestControl1_UpdatePanel1').get(0); 
        currentDiv.parentNode.insertBefore(styler,currentDiv) ;
    }

我在这里遗漏了什么吗？显示此div的部分来自Master Page。

Answer 1

你有没有在css上试过position:fixed样式，我是在我的一个网站上做过的，并没有扭曲任何东西。

Answer 2

页面具有基于W3C指定的默认显示规则的自然元素流。当您在其他元素之间添加div时，它自然会影响页面的布局;其他元素的位置。

为了在不影响其他元素的情况下放入新元素，您必须为其保留空间，或者将其从正常页面流中取出。

有几种方法可以将一个元素从流中取出 - 您可以float它，float:left或float:right，这很好，例如，堆叠块左边（而不是自上而下）让它们在可用宽度变化时换行到新行。使用flex布局也可以为您提供很多控制。但是在这种情况下弹出一个东西，更改新元素的position是最直接的，并且可以让你把块准确地放在你想要的位置。

我在a fiddle中有一个演示和完整的解释，显示了获得所需内容的几个例子。

基本上，需要样式化来重新定位要插入的超时消息元素。与添加一组内联样式相比，使用CSS样式可以更好地完成样式设置。如果我将超时弹出消息放在“messagebox”中，我可以为它创建一个类。

/* Your styles, plus a couple extra to make the example stand out better */
div.messagebox {
    font-size: 16px;
    width: auto;
    height: auto;
    top: 40%;
    left: 30%;
    background-color: white;
    border: 2px solid black;
}

同样，使用类设置邮件本身的样式，而不是使用内联样式和不推荐的表示标记<b>和<i>。

/* I want the message in a messagebox to be bold-italic-red text. */
div.messagebox .message {
    color: red;
    font-style: italic;
    font-weight: bold;
}

最大的区别在于我们会将元素的定位从默认static更改为使用绝对定位：

/* I don't really recommend a class called "positioned".
   A class should describe the kind of thing the element *is*
   not how it *looks*
*/
div.messagebox.positioned {
    position: absolute;
    width: 40%;
    padding: 1.5em;
}
/* The container of the positioned element also has to be positioned.
   We position it "relative" but don't move it from its natural position.
*/
section#hasposition {
    position: relative;
}

术语“绝对”很难学习......被定位的元素在其容器中被赋予绝对位置，在某种意义上它相对于其容器定位......但是{ {1}}意味着相对于它自己的自然位置，所以一开始很容易混淆你是想要绝对定位还是相对定位。

总而言之，我们有一些基本的HTML代表页面的主要部分 - 真正的页面将有更多，但这些应该包含在一些顶级容器中。这仅显示那些顶级容器 然后我们有一些javascript将在适当的时候添加新元素。在这里，我只是调用函数在使用position:relative创建的延迟后添加它。我正在使用全面的jQuery，因为你在你的例子中使用了一些，它使javascript更加便携，更简洁。

setTimeout()

function ShowSessionTimeoutStyled() {
    var styler = $('<div>').addClass('messagebox').addClass('positioned');
    styler.html('<span class="message">The Session Timed Out</span>');
    $('#hasposition .above').after(styler);
}
// wait 6 seconds then add the new div
setTimeout(ShowSessionTimeoutStyled, 6000);

div.messagebox {
    font-size: 16px;
    width: auto;
    height: auto;
    top: 20%;
    left: 20%;
    background-color: white;
    border: 2px solid black;
}
div.messagebox .message {
    color: red;
    font-style: italic;
    font-weight: bold;
}
div.messagebox.positioned {
    position: absolute;
    width: 40%;
    padding: 1.5em;
}
section#hasposition {
    position: relative;
}
/* also style some of the basic parts so you can see them better in the demonstration */
section.explanation {
    margin: 1em 0.5em;
    padding: 0.5em;
    border: 1px solid gray;
}
 .demonstration {
    margin-left: 1em;
    padding: 1em;
    background-color: #e0e0e0;
}
.demonstration .above {
    background-color: #fff0f0;
}
.demonstration .middle {
    background-color: #f0fff0;
}
.demonstration .below {
    background-color: #f0f0ff;
}
.demonstration footer {
    background-color: white;
}
p {
    margin-top: 0;
    padding-top: 0;
}
section {
    font-family: sans-serif;
}

我强烈推荐网站Position Is Everything获取有关定位的文章和教程。它的一些其他内容已经过时 - 谁需要让PNG再做阴影？ - 但定位的工作方式没有改变。