Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery Как сделать всплывающее окно чтения новостей?

Как сделать всплывающее окно чтения новостей?


     04.02.2015    jQuery, Хаки    1113

вопрос
Сделал вывод новостей в блок, чтобы при клике на новость открывалось всплывающее окно с текстом.
Но скрипт не видит {news-id}. Куда и как прописать {news-id} чтобы работали все новости, а не только с id - 1?
Вот скрипт:
$(document).ready(function() {


    $('body').append('<div class="popup-box" id="popup-box-1"><div class="close2">X</div><div class="top"><h2>Привет! Это демо окно!</h2></div><div class="bottom">Вот чем мы занимаемся на сайте <a href="http://sitear.ru">sitear.ru</a>! Создаем всякие штучки для сайта. Продвигаем и монетизируем. Если вам понравилось это окно, можете поделиться этим уроком в соц. сетях. Это действительно помогает нашему сайту!</div></div>');
    $('body').append('<div id="blackout"></div>');
    
    var boxWidth = 1000;
    
    function centerBox() {
        
        /* Preliminary information */
        var winWidth = $(window).width();
        var winHeight = $(document).height();
        var scrollPos = $(window).scrollTop();
        /* auto scroll bug */
        
        /* Calculate positions */
        
        var disWidth = (winWidth - boxWidth)
        var disHeight = scrollPos;
        
        /* Move stuff about */
        
         $('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
    
    $('.popup-box').css({'width' : boxWidth+'px'});
        return false;
    }
    
    
    $(window).resize(centerBox);
    $(window).scroll(centerBox);
    centerBox();    

    $('[class*=popup-link]').click(function(e) {
    
        /* Prevent default actions */
        e.preventDefault();
        e.stopPropagation();
        
        /* Get the id (the number appended to the end of the classes) */
        var name = $(this).attr('class');
        var id = name[name.length - 1];
        var scrollPos = $(window).scrollTop();
        
        /* Show the correct popup box, show the blackout and disable scrolling */
        $('#popup-box-'+id).show();
        $('#blackout').show();
        
        
        /* Fixes a bug in Firefox */
        $('html').scrollTop(scrollPos);
    });
    $('[class*=popup-box]').click(function(e) {
        /* Stop the link working normally on click if it's linked to a popup */
        e.stopPropagation();
    });
    $('html').click(function() {
        var scrollPos = $(window).scrollTop();
        /* Hide the popup and blackout when clicking outside the popup */
        $('[id^=popup-box-]').hide();
        $('#blackout').hide();
        $("html,body").css("overflow","auto");
        $('html').scrollTop(scrollPos);
    });
    $('.close2').click(function() {
        var scrollPos = $(window).scrollTop();
        /* Similarly, hide the popup and blackout when the user clicks close2 */
        $('[id^=popup-box-]').hide();
        $('#blackout').hide();
        $("html,body").css("overflow","auto");
        $('html').scrollTop(scrollPos);
    });
});


Вот код шаблона:
<a class="popup-link-{news-id}" href="">{title}</a>

<div class="popup-box" id="popup-box-{news-id}">
    <div class="close2">X</div>
    <div class="top">
        <h2>{title}</h2>
    </div>
    <div class="bottom">
        {short-story}
    </div>
</div>

Комментарии пользователей (6)

vadims
10

373 | 63

vadims - 5 февраля 2015 10:47 - Юзер

Не проще поставить готовое решение жля ДЛЕ?
В разделе модули. Ajax... 3 новость.

serg91100
3

242 | 37

serg91100 - 5 февраля 2015 10:51 - Юзер

Не видел, сейчас посмотрю.

vadims
10

373 | 63

vadims - 5 февраля 2015 11:11 - Юзер

***Комментарий удален***

serg91100
3

242 | 37

serg91100 - 5 февраля 2015 13:40 - Юзер

А как вставить модуль например в topnews?
Вывожу список новостей через файл шаблона topnews и чтобы при нажатии на новость (тайтл) открывалось модальное окно с новостью?

serg91100
3

242 | 37

serg91100 - 5 февраля 2015 13:53 - Юзер

DLE 10.3

serg91100
3

242 | 37

serg91100 - 5 февраля 2015 14:56 - Юзер

Сам сделал. Спасибо

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы