Как вынести код окна из этого кода?

844

joost

27 февраля 2015, 13:21

247

Как вынести код самого окна из этого кода?


<html>



<head>

<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:#001;

    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:900px; 

    height:700px;

    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); 

    });

    $('.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>

149

dimsog

27 февраля 2015, 13:25

Я ничего не понял. Окно вывести на экран?

ihor vps -> ihc.ru

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Как вынести код окна из этого кода?