0

Здравствуйте,есть ссылка,которая вызывает диалоговое окно.Вот она

<a href="#dialog" name="modal"><img src="http://iconizer.net/files/Crystal_Clear/orig/video2.png" /> </a>

Работает прекрасно,но мне нужно чтобы,эта ссылка срабатывала внутри созданного блока,но этого не происходит,подскажите,что не так

<button id="btn2">new div</button>
<div id="container"></div>
<a href="#dialog" name="modal"><img src="http://iconizer.net/files/Crystal_Clear/orig/video2.png" /> </a>
<div id="boxes">  
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/>x</a></div>
<div class="content">
    <input type="text" id="url_video"/>Введите url видео</br>
    <button id="upload_video">Ок</button>

    </div>
</div>
</div>

<!-- Маска, затемняющая фон -->
<div id="mask"></div>


 $(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); 
    });
    $('.window .close').click(function (e) { 
    e.preventDefault();
    $('#mask, .window').hide();
    }); 
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    }); 


var dname_id = 1;
    $("#btn2").click(function () {

        var videoDiv = $('<div>')
            .attr('id', 'div_' + dname_id++)
            .css({
            'width': '150px',
                'height': '100px'
        })
            .addClass('resize')
            .html('<a href="#dialog" name="modal"><img src="http://iconizer.net/files/Crystal_Clear/orig/video2.png" /> </a>');

        $('#container').append(videoDiv);
        //-------------------------------------------------------//
       videoDiv.resizable({
            containment:"#container"
        });
        videoDiv.draggable({
            containment: 'parent'
        });

        videoDiv.click(function () {

            $('.selected').removeClass('selected');
            $(this).addClass('selected');
   });
 });
 });
6
  • Нужно сделать так, чтобы инициализация диалогового окна происходила после $('#container').append(videoDiv);
    – MAXOPKA
    10 мая 2015 в 17:53
  • @MAXOPKA,не затруднит ли вас поподробнее рассказать,как это сделать?
    – zkolya
    10 мая 2015 в 17:54
  • Где-то должна быть инициализация диалогового окна. Обычно она "вешается" на $(document).ready();. Вам нужно перенести её в ф-ю, которая создает ссылку.
    – MAXOPKA
    10 мая 2015 в 17:57
  • @MAXOPKA,Вам несложно ли будет показать как это сделать?
    – zkolya
    10 мая 2015 в 18:01
  • Код страницы можете выложить?
    – MAXOPKA
    10 мая 2015 в 18:03

1 ответ 1

1

Так попробуйте.

<button id="btn2">new div</button>
<div id="container"></div>
<a href="#dialog" name="modal"><img src="http://iconizer.net/files/Crystal_Clear/orig/video2.png" /> </a>
<div id="boxes">  
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/>x</a></div>
<div class="content">
    <input type="text" id="url_video"/>Введите url видео</br>
    <button id="upload_video">Ок</button>

    </div>
</div>
</div>

<!-- Маска, затемняющая фон -->
<div id="mask"></div>


 $(document).ready(function() {

var dname_id = 1;
    $("#btn2").click(function () {

        var videoDiv = $('<div>')
            .attr('id', 'div_' + dname_id++)
            .css({
            'width': '150px',
                'height': '100px'
        })
            .addClass('resize')
            .html('<a href="#dialog" name="modal"><img src="http://iconizer.net/files/Crystal_Clear/orig/video2.png" /> </a>');

        $('#container').append(videoDiv);

       videoDiv.resizable({
            containment:"#container"
        });
        videoDiv.draggable({
            containment: 'parent'
        });

        videoDiv.click(function () {

            $('.selected').removeClass('selected');
            $(this).addClass('selected');
   });
    $('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); 
    });
    $('.window .close').click(function (e) { 
    e.preventDefault();
    $('#mask, .window').hide();
    }); 
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    }); 
 });
 });
1
  • Огромнейшее Вам спасибо!
    – zkolya
    10 мая 2015 в 18:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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