Запуск Simplemodal с разным контентом каждый раз - PullRequest
Новая
       16

Запуск Simplemodal с разным контентом каждый раз

0 голосов
/ 03 августа 2011

Я использую плагин Simplemodal, который я получил отсюда: http://www.ericmmartin.com/projects/simplemodal-demos/

Мне удалось разместить одну из ссылок на этой странице: http://tonangi.com/portfolio_test.html (щелкните «Просмотр слайд-шоу»).ссылка на сайт).Я загружаю iframe.Я хочу сделать это еще 2 раза на одной странице, но я не могу понять, как ...

Я просто хочу загрузить новый контент на основе ссылки - так что вы видите 3 компании, иЯ должен иметь возможность загружать новый контент всякий раз, когда кто-то нажимает на соответствующую ссылку.

Может ли кто-нибудь мне помочь?

Ответы [ 2 ]

0 голосов
/ 03 августа 2011

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

    <br><br>
    <a href="#" id="link2">Verizon Support</a>
    <div class="link2" style="display:none"><iframe src="http://www.verizon.com/support" frameborder="0" height="700" scrolling="no" width="800"></iframe></div>

    <br><br>
    <a href="#" id="link3">Google ME</a>
    <div class="link3" style="display:none"><iframe src="http://www.google.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe></div>

    <br><br>
    <a href="#" id="link4">I Load HTML</a>

    <br><br>
    <a href="#" class="link5">I load same as </a> &nbsp; &nbsp; &nbsp;
    <a href="#" class="link5">what i load which is</a> &nbsp; &nbsp; &nbsp;    
    <a href="#" class="link5">same thing again as me! </a>  


<script type="text/javascript">
    $(document).ready(function() {

        $('#link2').click(function(){ $('.link2').modal(); }); //When you click on object with ID "link2", content from object with Class "link2" will be loaded into modal.

        $('#link3').click(function(){ $('.link3').modal(); }); //When you click on object with ID "link3", content from object with Class "link3" will be loaded into modal.

        $('#link4').click(function(){ $.modal('<iframe src="http://www.firefox.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe>'); }); //When you click on object with ID "link4", pre-specified HTML content in the "modal" function will be loaded into modal.

        $('.link5').click(function(){ $.modal('<iframe src="http://www.woot.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe>'); }); //When you click on any object with Class "link5", woot page will be loaded.

    });
</script>

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

Прочитайте комментарии из раздела jQuery, чтобы понять, что происходит.Имейте в виду, что идентификатор должен быть уникальным, то есть ВСЕ идентификаторы объекта на всей вашей странице должны быть уникальными для правильной работы JS.Если вам нужно несколько экземпляров одного и того же поведения, используйте CLASS.Как показано выше в примере в качестве ссылок "Class5".

Надеюсь, этого будет достаточно, чтобы сделать то, что вы пытались сделать.

0 голосов
/ 03 августа 2011

Я делаю это все время, и у нас всегда есть разные модальные div для каждого модала, который мы хотим вызвать.

Мы помещаем все наши модалы в класс под названием offscreen, который скрыт и идет в конце разметки, а затем запускаем их соответствующим образом.

Если вам нужна более динамическая функциональность, вам придется использовать какой-то AJAX-вызов для извлечения модального из серверного скрипта.

...