Модальные окна. Один скрипт и 6 блоков

[Anna Zharova]

Всем привет

 

Коллеги помогите разобраться с выводом модальных окон

 

Вот страница: http://azharova.ru/test/ee.html#

 

При нажатии на Ежика должно выходить одно модальное окно. У меня 6 ежей и каждый со своим окном, как мне настроить этот вывод

 

вот код скрипа, который я использую

 $(function() {        $( ".dialog" ).dialog({            autoOpen: false,            show: {                effect: "blind",                duration: 1000            },            hide: {                effect: "explode",                duration: 1000            }        });        $( ".opener" ).click(function() {            $( ".dialog" ).dialog( "open" );        });    });

Что я не правильно делаю?

[satantx]

Видимо вы плагином его вызываете? А что если в каждый блок с ёжиком спрятать это окно и показывать без плагина

[Switch74]

мне кажется здесь лучше было просто через ховер сделать, но в вашем случае я вижу следующее:

у вас два блока с классом dialog и opener - учиться и развлечься

у вас в скрипте указаны свойства для блоков dialog и вы привязываете к событию клика на элементах с классом opener открытия блока dialog

и естественно происходит открытие обоих блоков dialog при нажатии на любой из элементов opener

чтобы этого избежать вам нужно сделать для каждого ежика свои opener и dialog, например добавляя к ним цифры и прописать что-то вроде

        $( ".dialog1,.dialog2,.dialog3,.dialog4,.dialog5,.dialog6" ).dialog({            autoOpen: false,            show: {                effect: "blind",                duration: 1000            },            hide: {                effect: "explode",                duration: 1000            }        });        $( ".opener1" ).click(function() {            $( ".dialog1" ).dialog( "open" );        });        $( ".opener2" ).click(function() {            $( ".dialog2" ).dialog( "open" );        });....

естесно вы можете существенно сократить код использовав какой-нибудь параметр: id или data-, и делать проверку на него

[Anna Zharova]

Видимо вы плагином его вызываете? А что если в каждый блок с ёжиком спрятать это окно и показывать без плагина

не поняла немного?

мне кажется здесь лучше было просто через ховер сделать, но в вашем случае я вижу следующее:

у вас два блока с классом dialog и opener - учиться и развлечься

у вас в скрипте указаны свойства для блоков dialog и вы привязываете к событию клика на элементах с классом opener открытия блока dialog

и естественно происходит открытие обоих блоков dialog при нажатии на любой из элементов opener

чтобы этого избежать вам нужно сделать для каждого ежика свои opener и dialog, например добавляя к ним цифры и прописать что-то вроде

 

        $( ".dialog1,.dialog2,.dialog3,.dialog4,.dialog5,.dialog6" ).dialog({            autoOpen: false,            show: {                effect: "blind",                duration: 1000            },            hide: {                effect: "explode",                duration: 1000            }        });        $( ".opener1" ).click(function() {            $( ".dialog1" ).dialog( "open" );        });        $( ".opener2" ).click(function() {            $( ".dialog2" ).dialog( "open" );        });....

естесно вы можете существенно сократить код использовав какой-нибудь параметр: id или data-, и делать проверку на него

 

Вот ведь чудо............... Написала все через одно место и хочу чтоб работало

Спасибо сейчас исправлю