1

Здравствуйте, уважаемые знатоки ! Очень интересует вопрос создания модального окна на этом блоге. Как ни пытался, не получается. Весь гугл облазил. Читал про jquery и про великое множество разных плагинов. Но ни разу ничего толкового не получилось... Нужно сделать, чтобы на сайте с правой стороны где-нибудь была кнопочка, при нажатии на которую выезжает или просто появляется окно с моим текстом или картинкой.

Прошу знающих людей подробно рассказать все премудрости создания такого вот окошка.

1 ответ 1

2

http://jsfiddle.net/deamondz/FE7SK/

HTML

<div class="back"></div>
<div class="popup_window">
    <div class="ppw_cls"></div>
    <!--<div class="ppw_cls right"></div>-->
    <div class="ppw_wrap">lorem ipsum dolor sit amet</div>
</div>
<p><a href="#" class="op">open</a></p>
<p><a href="#" class="op oright">open with right close key</a></p>

CSS

.popup_window{
    position:fixed;
    display:none;
    background:rgba(0,0,0,0.75);
    padding:6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    z-index:99;
}
.ppw_wrap{
    background:#f8f8f8;
    position:relative;
    padding:10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.ppw_cls{
    background:url(http://img217.imageshack.us/img217/1462/ppwclose.png) center no-repeat;
    cursor:pointer;
    display:block;
    position:absolute;
    top:-10px;left:-10px;
    width:30px;
    height:29px;
    z-index:999;
}
.ppw_cls.right{left:auto;right:-10px;}
.back{
    background:rgba(0,0,0,0.75);
    position:absolute;
    top:0px;left:0px;
    display:block;
}

JS

var $ppw = $('.popup_window');
$('.ppw_cls,.back').bind('click', function() {
    $('.back').fadeOut(300);
    $ppw.fadeOut(300);
});

function popup() {
    var ppww = $ppw.width(),
        ppwh = $ppw.height();
    var mww = $(window).width(),
        mwh = $(window).height();
    var ppwl = mww / 2 - ppww / 2,
        ppwt = mwh / 2 - ppwh / 2;
    $ppw.css({
        left: ppwl,
        top: ppwt
    });
    $('.back').css({
        width: mww,
        height: mwh
    }).fadeIn(300);
    $ppw.fadeIn(300);
}
$('.op').bind('click', function() {
    popup();
    $('.ppw_cls').removeClass('right');
    return false;
});
$('.oright').bind('click',function(){$('.ppw_cls').addClass('right')})
2
  • Оу спасибо ! Но вопрос ещё не закрыт... Там html код.А wordpress на php ведь.Подскажите пожалуйста как реализовать это.
    – shark2010
    20 сен 2011 в 23:47
  • создаёте новую запись, запоминаете её id, вместо моего lorem пишите query_posts('p=ваш id'),например query_posts(‘p=5′)
    – deamondz
    21 сен 2011 в 0:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.