SimpleModal - использование нескольких ссылок на одной странице для открытия модальных страниц с разным контентом - PullRequest
Новая
       5

SimpleModal - использование нескольких ссылок на одной странице для открытия модальных страниц с разным контентом

0 голосов
/ 25 февраля 2011

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

Я целую вечность бездельничал с DIV ID и файлом basic.js без удачи.

Большое спасибо

Редактировать (технология используется в настоящее время): SimpleModal

Ответы [ 2 ]

0 голосов
/ 03 марта 2011

Следующий ответ SO может привести вас в правильном направлении:

Несколько вызовов с помощью простого модального стиля OSX Диалог

Вы захотите создать отдельные элементы синформацию о сотруднике, а затем, используя пример JS в приведенной мной ссылке, программно сопоставьте ссылки в виде миниатюр с разделом информации о сотруднике.

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

Обновление : Этот ответ для решения с использованием SimpleModal

0 голосов
/ 25 февраля 2011

Изменить этот ответ для использования JQuery & JQuery-UI

Сначала я укажу на инструмент, который мы будем использовать для создания диалога: http://jqueryui.com/demos/dialog/

Далее несколько вспомогательных функций, которые сделают вашу жизнь проще: 

$(function(){
    $(".jqy-modal").each(function () {
        $(this).dialog({ autoOpen: false, width: "925px", modal: true, title: $(this).attr("data") });
    });

    $(".auto-wire-dialog").click(function () {
        $("#" + $(this).attr("data")).dialog("open");
    });
});

Далее рассмотрим, как будет выглядеть ваш html: 

<a href="#" class="auto-wire-dialog" data="JimBobProfile">Dr. Jim Bob</a>

<div id="JimBobProfile" class="jqy-modal" data="Dr Jim Bob">
    <!-- Info here!!! -->
</div>

Наконец, чтобы понять концепцию:

класс auto-wire-dialog можно поставить на ЛЮБОЙ кликабельный элемент. Если щелкнуть этот элемент, откроется соответствующее диалоговое окно с идентификатором, указанным в атрибуте data = "...".

класс jqy-modal может быть ТОЛЬКО помещен в тег div. Вот что создает ваше модальное / диалоговое окно. Вы можете поместить элемент данных, чтобы указать заголовок!

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

...