Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.01.2014, 13:47
Новичок на форуме
Отправить личное сообщение для 3168424 Посмотреть профиль Найти все сообщения от 3168424
 
Регистрация: 29.01.2014
Сообщений: 5

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

Помогите исправить этот код!

<script type="text/javascript" language="javascript">
$(document).ready(function () {

    $('body').append('<div id="blackout"></div>');

    var boxWidth = 425;

    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) / 2
        var disHeight = scrollPos + 150;

        /* Move stuff about */
        $('.popup-box').css({
            'width': boxWidth + 'px',
            'left': disWidth + 'px',
            'top': disHeight + 'px'
        });
        $('#blackout').css({
            'width': winWidth + 'px',
            'height': winHeight + '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').scrollTop(scrollPos);
    });
});
</script>

Вот html для вывода попап окна

<a class="popup-link-23" alt="" title="">
Ссылка для вывода
</a>

<div class="popup-box" id="popup-box-23">
Сам вывод
</div>

Зарание примного благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 29.01.2014, 16:10
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от 3168424
вот только когда id окна состоит из двухзначного числа то перестает работать
Потому как фигово вычисляется соответствующий ИД...
Как вариант.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.popup-box {
	display: none;
}
</style>
<script type="text/javascript">
$(function () {
    $('body').append('<div id="blackout"></div>');
    var boxWidth = 425;
    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) / 2
        var disHeight = scrollPos + 150;
        /* Move stuff about */
        $('.popup-box').css({
            'width': boxWidth + 'px',
            'left': disWidth + 'px',
            'top': disHeight + 'px'
        });
        $('#blackout').css({
            'width': winWidth + 'px',
            'height': winHeight + '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.match(/\d+$/);
		/*
			Тут фигня
			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').scrollTop(scrollPos);
    });
});
</script>
</head>
<body>
<a class="popup-link-23" alt="" title="">
	Ссылка для вывода
</a>
<div class="popup-box" id="popup-box-23">
	Сам вывод
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 29.01.2014, 16:20
Новичок на форуме
Отправить личное сообщение для 3168424 Посмотреть профиль Найти все сообщения от 3168424
 
Регистрация: 29.01.2014
Сообщений: 5

Спасибо огромное!
Спасибо огромное!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите дополнить попап! as999 Общие вопросы Javascript 11 12.03.2013 13:08
Помогите с модальным окном. jeysmook jQuery 1 16.05.2012 16:47
Помогите с модальным окном lolka84 Events/DOM/Window 0 28.10.2011 22:31
Помогите с модальным окном!! -Dima- Элементы интерфейса 12 15.04.2010 17:48
Помогите пожалуйста профану - проверьте синтаксис - Попап dopelher Общие вопросы Javascript 6 14.08.2009 10:07