Могу ли я использовать этот код для отображения двух разных окон? - PullRequest
Новая
       32

Могу ли я использовать этот код для отображения двух разных окон?

4 голосов
/ 18 марта 2012

В настоящее время я создаю веб-сайт с определенными изображениями, при нажатии на который откроется всплывающее окно, подобное этому здесь.

http://dhtmlpopups.webarticles.org/movable.php

(спуститесь вниз и нажмите кнопку (огонь), чтобы проверить его)

Код и исходные файлы доступны на верхней странице

Вместо кнопки отправки я установил изображение. Это прекрасно работает.

Теперь вот моя проблема. Мне нужно, чтобы при щелчке в зависимости от изображения во всплывающем окне отображались разные изображения. Но когда я продублировал код и вставил его в другое место на той же странице, кажется, что независимо от того, что я делаю, он просто показывает самое первое изображение и ничего не меняет. Даже когда я изменил ссылки на файлы изображений. Что именно не так? почему мое второе окно не меняется и имеет те же изображения, что и первое?

Подробный пример того, что я пытаюсь сделать

  1. Изображение одно щелкается и показывает красное изображение с подвижным окном.
  2. Изображение два щелкается и показывает синее изображение с подвижным окном.

1 Ответ

3 голосов
/ 18 марта 2012

Ссылка, которую вы нам показали, очень старая. Поэтому было бы глупо поддерживать ваши задачи, потому что большая часть функциональности сегодня обрабатывается другими способами.

Вы можете использовать jQuery с jQueryUI , чтобы создать что-то, что вы хотите. Вы можете посмотреть демоверсии там, но вы легко можете сделать это:

HTML 

<div id="diag1"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div>
<div id="diag2"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div>
<img id="pic1" src="http://dummyimage.com/100&text=pic1">
<img id="pic2" src="http://dummyimage.com/100&text=pic2">

Javascript: 

$().ready(function(){
    $("#diag1").dialog({ autoOpen: false });
    $("#diag2").dialog({ autoOpen: false });
    $("#pic1").click(function(){
        $("#diag1").dialog('open');
    });
    $("#pic2").click(function(){
        $("#diag2").dialog('open');
    });
});

Также смотрите вашу демонстрацию на JS Fiddle.

UPDATE:

красивее было бы это решение на JS Fiddle

Поскольку вы выбираете функциональность с помощью class и сохраняете открытый диалог в атрибуте data-openid. Обязательно поймите первый пример , прежде чем запускать этот :) Также вы должны знать кое-что о jQuery и CSS-селекторах

HTML: 

<div id="diag1" class="diagc"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div>
<div id="diag2" class="diagc"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div>
<div id="diag3" class="diagc"><img src="http://dummyimage.com/100/00ff00/FFFFFF&text=green"></div>
<img class="picdiag" src="http://dummyimage.com/100&text=pic1" data-openid="diag1">
<img class="picdiag" src="http://dummyimage.com/100&text=pic2" data-openid="diag2">
<img class="picdiag" src="http://dummyimage.com/100&text=pic3" data-openid="diag3">​

Javascript: 

$().ready(function(){
    $(".diagc").each(function(){
        $(this).dialog({ autoOpen: false });
    });
    $(".picdiag").each(function(){
        $(this).click(function(){
            $("#"+$(this).attr("data-openid")).dialog("open");
        });
    });
});
...