Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите сделать автозапуск модального окна (https://javascript.ru/forum/jquery/53928-pomogite-sdelat-avtozapusk-modalnogo-okna.html)

gosha-misha 24.02.2015 16:56

Помогите сделать автозапуск модального окна
 
Посмотрел как создать модальное окно, но не могу сделать чтобы оно автоматически запускалось

пробывал из следующей статьи http://tradebenefit.ru/vsplyvajushhe...query#modalcss

рони 24.02.2015 17:03

gosha-misha,
$('a[name=modal]').click(function(e) {...}).click()

gosha-misha 24.02.2015 17:21

Цитата:

Сообщение от рони (Сообщение 358145)
gosha-misha,
$('a[name=modal]').click(function(e) {...}).click()

а что в таких собочках {} я пишу только на php объясни пожалуйста для чайника

gosha-misha 24.02.2015 17:23

или запуск модального окна из адресной строки

рони 24.02.2015 17:26

gosha-misha,
я написал что добавить в код что вы указали по ссылке
вам нужно добавить только красное

рони 24.02.2015 17:29

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>

gosha-misha 24.02.2015 17:36

Спасибо рони!!!


Часовой пояс GMT +3, время: 07:48.