Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Стандартные модальные окна DLE + доп. поля

Стандартные модальные окна DLE + доп. поля


     07.10.2014    модальные окна, доп. поля    Все вопросы » Шаблоны (TPL)    3230

вопрос
Всем привет!

Подскажите пожалуйста, как подключить в стандартные модальные окна DLE открытие дополнительных полей?

Пример:

        [xfgiven_поле]
            <a href="#" >
               <img src="{THEME}/images/иконка.png" alt="" />
            </a>
        [/xfgiven_поле]


Т. е. нужно чтоб по клику по иконке открылось окно с доп. полем.

Спасибо.

Ответа пока нет


11 комментариев

FastFud
Юзер

FastFud - 7 октября 2014 01:05 -

Как то так:
<div class="xf-button">[xfvalue_icon]</div>
<div class="xf-dialog">[xfvalue_title]</div>
css
.xf-dialog {display: none; width:500px;height:200px;}
jQuery
$(function(){
$('.xf-button').click(function(){
$('.xf-dialog').dialog();
});
});

Саня
Юзер

Саня - 7 октября 2014 01:20 -

FastFud,спасибо за оперативность но что-то не пашет...((((

FastFud
Юзер

FastFud - 7 октября 2014 01:26 -

Я только что проверил и вроде бы все работает. Что у вас не получилось ?
P.S - Вот пример

Саня
Юзер

Саня - 7 октября 2014 01:38 -

FastFud,вроде за работало, но, если на странице 5 новостей с заполненным полем, то открываются сразу 5 окон... как это дело обойти?
Еще раз спасибо.

FastFud
Юзер

FastFud - 7 октября 2014 01:56 -

Если не сработает завтра посмотрю щас и так голова забита.
shortstory
<div class="news-item" data-id="item{news-id}">
...
<div class="xf-button">Нажать кнопку</div>
<div class="xf-dialog" id="item{news-id}">[xfvalue_test]</div>
</div>
jQuery
$(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-button').click(function(){
                $('#'+id).dialog({
                    width: 500,
                    height: 200,
                    show: "fade",
                    modal: true
                });
            });
        });
    });
css
.xf-button {padding: 15px;background: #ddd;border: 1px solid #ccc;margin: 15px;float: left;cursor: pointer;} 
.xf-dialog {display: none;}

Саня
Юзер

Саня - 7 октября 2014 03:31 -

FastFud,id новости теперь работает, теперь бы еще определить id поля. Дело в том что планируется открывать несколько полей по отдельности, а так как сейчас оно открывает разброс что попало.
И еще вопрос - как прописать заголовок окна?

FastFud
Юзер

FastFud - 7 октября 2014 10:41 -

И еще вопрос - как прописать заголовок окна?
 <div class="xf-dialog" id="item{news-id}">[xfvalue_test]</div>
Добавить title="текст" получиться так
<div class="xf-dialog" id="item{news-id}" title="текст">[xfvalue_test]</div>
теперь бы еще определить id поля. Дело в том что планируется открывать несколько полей по отдельности, а так как сейчас оно открывает разброс что попало.
А вот тут я не совсем понял.

Саня
Юзер

Саня - 7 октября 2014 13:55 -

Цитата: FastFud
не совсем понял.
Ну вот как я сделал:
shortstory

[not-group=5]
<div class="news-item" data-id="item{news-id}">    
        [xfgiven_1]
<div class="xf-1"></div>
<div class="xf-dialog" id="item{news-id}">[xfvalue_1]</div>
        [/xfgiven_1]
        [xfgiven_2]
<div class="xf-2"></div>
<div class="xf-dialog" id="item{news-id}">[xfvalue_2]</div>
        [/xfgiven_2]
        [xfgiven_3]
<div class="xf-3"></div>
<div class="xf-dialog" id="item{news-id}">[xfvalue_3]</div>
        [/xfgiven_3]
    [xfgiven_4]    
<div class="xf-4"></div>
<div class="xf-dialog" id="item{news-id}">[xfvalue_4]</div>
    [/xfgiven_4]
</div>
[/not-group]

jQuery

$(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-1').click(function(){
                $('#'+id).dialog({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });
$(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-2').click(function(){
                $('#'+id).dialog({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });    
    
    $(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-3).click(function(){
                $('#'+id).dialog({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });
$(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-4').click(function(){
                $('#'+id).dialog({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });


Открываются в принципе все, но выбор идет как-то самопроизвольно, кликаешь по xf-1 открыть может любую другую xf-4 например...

Саня
Юзер

Саня - 8 октября 2014 00:35 -

утонул вопрос((((((

Саня
Юзер

Саня - 10 октября 2014 03:29 -

что никак не решить вопрос?

Саня
Юзер

Саня - 14 октября 2014 08:30 -

В общем методом научного тыка добился успеха))))))))))) Вот так сейчас выглядит код:
shortstory
    [not-group=5]
<div class="news-item" data-id="item{news-id}">    
        [xfgiven_1]

<div class="xf-1"></div>
<div class="xf1-dialog" title="хххххх" id="item{news-id}" >[xfvalue_1]</div>
        [/xfgiven_1]
        [xfgiven_2]
<div class="xf-2l"></div>
<div class="xf2-dialog" title="ххх"><div class="title">[xfvalue_2]</div>
        [/xfgiven_2]
    [xfgiven_3]
<div class="xf-3"></div>
<div class="xf3-dialog" title="хххt" id="item{news-id}">[xfvalue_3]</div>
    [/xfgiven_3]
    [xfgiven_4]        
<div class="xf-4"></div>
<div class="xf4-dialog" title="ххх" id="item{news-id}">[xfvalue_4]</div>
       [/xfgiven_4]
</div>
[/not-group]

jQuery

    $(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-1).click(function(){
                $('.xf1-dialog#'+id).dialog ({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });
    $(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-2').click(function(){
                $('.xf2-dialog#'+id).dialog ({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });
    $(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-3').click(function(){
                $('.xf3-dialog#'+id).dialog ({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });
    $(function(){
        $('.news-item').each(function(){
            var id = $(this).attr('data-id');
            $(this).find('.xf-4').click(function(){
                $('.xf4-dialog#'+id).dialog ({
                    width: 700,
                    show: "fade",
                    modal: true
                });
            });
        });
    });


В принципе все работает отлично, как мне кажется код все таки слишком громоздкий получился. Можно ли его как-то оптимизировать?

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

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

наверх