Как исчезнуть фон - PullRequest
Новая
       45

Как исчезнуть фон

2 голосов
/ 09 февраля 2009

Я собирался посмотреть, как это сделать, но я не знаю, как это назвать, чтобы посмотреть, поэтому я надеялся, что смогу описать это здесь, и кто-нибудь может указать мне правильное направление. В любом случае, я ищу, как сделать это на веб-сайте, когда вы нажимаете на что-то, появляется новый слой сорта и исчезает фон. Я вижу, что сайты делают это все время, но я не уверен, как это сделать. Небольшое руководство было бы здорово.

Ответы [ 9 ]

8 голосов
/ 09 февраля 2009

Это называется лайтбокс. Вы можете Google для этого термина .

2 голосов
/ 09 февраля 2009

использовать shadowbox !!!

2 голосов
/ 09 февраля 2009

Если вы хотите избежать веса библиотеки JavaScript, вот рабочий пример, который может показаться вам поучительным, основанный на некоем домашнем коде, который я использовал много раз ... 

<html>
<head>
<style type="text/css">
  #helloWorld {
    position:absolute;
    margin:2em;padding:2em;
    border:1px solid #000;
    background-color:#ccd;
    opacity:0;
    filter:alpha(opacity=0.0); }
</style>

<script type='text/javascript'>

  function setOpacity( elem, amount ) {
    if ( amount > 1.0 )
      amount = 1.0

  /*@cc_on
    @if (@_jscript)
    // This is For Internet Explorer Only
    //
            elem.style.filter = "alpha(opacity=" + Math.round( amount * 100 ) + ")";
    @else*/
    // for all other browsers
    //
            elem.style.opacity = amount;
  /*@end
    @*/
  }
  // endOpacity ranges from 0.0 to 1.0
  // fade time is in seconds
  function fadeIn( elem, endOpacity, fadeTime ) {
    var startTime = (new Date()).getTime();
    var fadeTimer = null;

    var fadeStep = function() {
      var elapsedTime = (new Date()).getTime() - startTime;
      var opacity = endOpacity * elapsedTime / (fadeTime * 1000.0);
      if ( opacity >= endOpacity ) {
        opacity = endOpacity 
        clearInterval( fadeTimer );
      }
      setOpacity( elem, opacity );
    }
    fadeTimer = setInterval( fadeStep, 40 ) // with luck = 25 frames per second
  }

  window.onload = function() { 
    var elem = document.getElementById( 'helloWorld' );
    var clickMe = document.getElementById( 'clickMe' );
    clickMe.onclick = function() {
      fadeIn( elem, 0.8, 2.0 ); // fade to 80% over 2 seconds
    }
  }

</script>
</head>
<body>

<div id="helloWorld"><h1>Hello World</h1></div>

<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>

<p><input id='clickMe' type='button' value='Click me please' /></p>

</body>
</html>
1 голос
/ 09 февраля 2009

Вы можете использовать плагин SimpleModal для jQuery. Я успешно использовал его в ряде проектов.

Это не слишком сложно в использовании и очень гибко.

1 голос
/ 09 февраля 2009

Вы можете решить это с помощью функции Javascript: 

function ShowNewPanel()
{
var new_panel = document.getElementById(’new_panel’);
// w is a width of the new panel
w = 300;
// h is a height of the new panel
h = 300;
// get the x and y coordinates to center the new panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
new_panel.style.left = xc + “px”;
new_panel.style.top = yc + “px”;
new_panel.style.display = ‘block’;
}

Как вы видите, мы сначала определяем координаты, которые будут центрировать нашу панель ввода на странице. Ширина и высота панели обновления могут быть изменены в соответствии с вашими потребностями, но имейте в виду, что вам нужно изменить эти значения в CSS, а также в этой функции.

Для самого темного экрана используйте что-то подобное в CSS: 

filter:alpha(opacity=80);
opacity: 0.8;

Подробнее об этом здесь .

1 голос
/ 09 февраля 2009

Вот отличная статья об опакте в CSS от ppk: http://www.quirksmode.org/css/opacity.html

должно помочь вам abit:)

0 голосов
/ 09 февраля 2009

Я думаю, вам также нужно использовать javascript, чтобы это было возможно.

Вот способ jQuery, чтобы заставить фон исчезать, называемый BlockUI: http://malsup.com/jquery/block/

0 голосов
/ 09 февраля 2009

Я вполне уверен, что вы имеете в виду то, что обычно называют модальным диалоговым окном (что немного вводит в заблуждение) ... достойную демонстрацию jquery можно найти здесь

0 голосов
/ 09 февраля 2009

Вы можете сделать это, используя jQuery . У CSS Tricks есть учебник под названием Color Fading Menu с jQuery здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...