Как я могу заставить свою "панель предупреждения" нажимать все на моем веб-сайте?

Я написал панель предупреждений:

alertmsg{
 font-family:Arial,Helvetica,sans-serif;
 font-size:135%;
 font-weight:bold;
 overflow: hidden;
 width: 100%;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 0px;
 background-color: #fff;
 height: 56px;
 color: #000;
 font: 20px/40px arial, sans-serif;
 display:none;
 padding-top:12px;
 -webkit-box-shadow: 3px 3px 5px #888;
 -moz-box-shadow: 3px 3px 5px #888;
 box-shadow: 3px 3px 5px #888;
}
function alertbar(m, timeout){
 if(!timeout){
 var timeout = 3000;
 }
 var $alertdiv = $('<div id="alertmsg"><code>');
 $alertdiv.text(m);
 $alertdiv.bind('click', function() {
 $(this).slideUp(200);
 });
 $(document.body).append($alertdiv);
 $("#alertmsg").slideDown("slow");
 setTimeout(function() { $alertdiv.slideUp(200) }, timeout);
 return false
}</code>
<p>Довольно просто. Я вызываю <code>alertbar("Go go go!");</code>, чтобы выпустить это предупреждение.</p>
<p>Однако он охватывает страницу тела. Я хочу, чтобы это было похоже на "нажатие" на всей странице (все элементы)... вроде как StackOverflow, я думаю.</p></div>
4 ответа

Я думаю, что это проблема position: fixed. Это поместит ваш элемент относительно окна и выведет его из нормального потока.

Используйте position:static (или relative) и убедитесь, что элемент alertmsg находится в верхней части разметки.


Есть несколько вещей, которые вы должны сделать:

  • Измените атрибут position CSS в "панели предупреждений", чтобы он не был fixed и просто был нормальным (удалите это свойство).
  • Измените свой JavaScript на prepend alertdiv, а не добавьте его. Это сделает его первым в теле.

    .

    $( 'тело') перед именем ($ alertdiv);

  • Слайд ваш $alertdiv вниз нормально.

Теперь что-то, что вы не учли в своем коде, это то, что происходит, когда вы запускаете alertbar более одного раза. Вы добавите больше чем к телу. Если это вызывает беспокойство, попробуйте сделать что-то вроде этого:

var exists = $('#alertmsg').length > 0;
var $alertdiv = exists ? $('#alertmsg') : $('<div id="alertmsg"><code>');</code>
<p>Теперь добавьте только тело, если оно уже не существует.</p>
<pre class="prettyprint linenums">if (!exists) 
 $('body').prepend($alertdiv);


Если вы хотите сохранить position: fixed, просто откройте верхнюю часть тела до размера окна оповещения.

$("#alertmsg").slideDown("slow", function() {
 var paddingTopStr = "+" + $(this).outerHeight().toString() + "px";
 $('body').css({ paddingTop: paddingTopStr });
});

Вам также нужно будет вернуть заполнение после:

setTimeout(function() { 
 var paddingTopStr = "-" + $(this).outerHeight().toString() + "px";
 $('body').css({ paddingTop: paddingTopStr });
 $alertdiv.slideUp(200) }, timeout);
}

То же самое для события click.


Вы можете обернуть остальную часть вашего контента (чтобы быть нажатой) в отдельном div, а затем вставить свою панель предупреждений перед ней

licensed under cc by-sa 3.0 with attribution.