Question

在下面的jsfiddle示例中，每当有警报时，它会将其下方的内容向下移动一行。如何创建一个专用于警报的空白行，这些警报只会让警报淡入淡出而不会将其下方的内容移动下来？

HTML：

<div class="alert-box success">Successful Alert !!!</div>
<div class="alert-box failure">Failure Alert !!!</div>
<div class="alert-box warning">Warning Alert !!!</div>
<hr>
<p>hello world</p>
<p>
    <button id="success-btn">Success</button>
    <button id="failure-btn">Failure</button>
    <button id="warning-btn">Warning</button>
</p>

的javascript：

$( "#success-btn" ).click(function() {
  $( "div.success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#failure-btn" ).click(function() {
  $( "div.failure" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#warning-btn" ).click(function() {
  $( "div.warning" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

的CSS：

.alert-box {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    display: none;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    display: none;
}

Answer 1

将它们包裹在具有足够高度的包装div中。

Fiddle

<div id="alert-wrapper">
    <div class="alert-box success">Successful Alert !!!</div>
    <div class="alert-box failure">Failure Alert !!!</div>
    <div class="alert-box warning">Warning Alert !!!</div>
</div>

CSS：

#alert-wrapper{
    height:46px;
}

Answer 2

USe visibility: hidden

.alert-box {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    visibility: hidden;
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    visibility: hidden;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    visibility: hidden;
}

如何为javascript警报创建专用行？

2 个答案: