Показать сообщение отдельно
  #6 (permalink)  
Старый 24.02.2015, 17:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,091

gosha-misha, строка 79
<html>

<head>
<meta charset="utf-8">
<style>
    body {
    font-family:verdana;
    font-size:15px;
    }

    .link {color:#fff; text-decoration:none}
    .link:hover {color:#fff; text-decoration:underline}

#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }

#boxes .window {
    position:absolute;
    left:0;
    top:0px;
    -top: 40px;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding: 20px;
    overflow: hidden;
    }

#boxes #dialog {
    width:375px;
    height:203px;
    padding:10px;
    background-color:#ffffff;
    }

.top {
    position:absolute;
    left:0;
    top:0;
    width:370px;
    height:30px;
    background: #0085cc;
    padding: 8px 20px 6px 10px;
    }

.close {
    float:right;
    }

.content {
    padding-top: 35px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $('a[name=modal]').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(2000);
    }).click();
    $('.window .close').click(function (e) {
    e.preventDefault();
    $('#mask, .window').hide();
    });
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    });
   });
</script>

</head>

<body>

<a href="#dialog" name="modal">Вызов модального окна</a>


<!-- Само окно -->
<div id="boxes">
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/>Закрыть</a></div>
<div class="content">Текст в модальном окне.</div>
</div>
</div>


<!-- Маска, затемняющая фон -->
<div id="mask"></div>

</body>
</html>
Ответить с цитированием