Простые вопросы Модальные - кратные, исчезающие Content

Я новичок JQuery и фальсифицировали Простой Modal, чтобы позволить мне иметь больше чем одну модальность на странице, делая это в моем сценарии:Простые вопросы Модальные - кратные, исчезающие Content

$('input.basic, a.basic').click(function (e) { e.preventDefault(); $(this).next('.basicModalContent').modal(); });

вот мой HTML:

<a class="basic linkHeading" href="#">Link Heading</a> 

<div class="basicModalContent" style="display: none;"> 
    <h1>This Resource Requires Login</h1> 
    <a href="#" class="simplemodal-close" title="Close">Cancel</a></p> 
</div><!--basicModal-->

проблема Я бегу в это все работает отлично на первый щелчок & близко. Второй клик запускает модальный, но весь контент уходит изнутри.

видеть эту ссылку на ошибку в действии: http://blanksky.com/test/ebenefits21/modal.html

источник

2009-11-02 Anonymous

Когда вы скрыть диалог, Jquery изменяет положение DIV в DOM, то хочет, чтобы найти его с «$(this).next(...)», вы не можете сделать. У вас должен быть некоторый идентификатор или ссылка для поиска в противном случае.

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

$('input.basic, a.basic').click(function (e) 
{ 
    e.preventDefault(); 
    var el = ""; 

    if($(this).data("xid")!=undefined) 
    { 
     el = $($(this).data("xid")); 
    } 
    else 
    { 
    var xid = "xid_" + ((new Date()).getTime()); 
    el = $(this).next('.basicModalContent'); 
    $(this).data("xid", xid); 
    if (el.lenght>0) 
     el.attr("id", xid); 
    } 

    if (el.lenght>0) 
    { 
    el.modal(); 
    } 
});

источник

2009-11-02 16:31:29

страница тянет динамический контент, поэтому у меня нет способа узнать, сколько модальных ссылок там может быть, или как ссылаться на них. – 2009-11-02 18:00:23

Я хотел бы предложить что-то вроде:

Ссылки:

<a href="#" class="basic" id="link-1">link1</a> 
<a href="#" class="basic" id="link-2">link2</a> 
<a href="#" class="basic" id="link-3">link3</a>

Скрытое содержимое (с помощью CSS или встроенный стиль)

<div id="link-1-content" style="display:none"> 
<p>content</p> 
</div> 
<div id="link-2-content" style="display:none"> 
<p>content</p> 
</div> 
<div id="link-3-content" style="display:none"> 
<p>content</p> 
</div>

JavaScript:

$(document).ready(function() { 
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) { 
              e.preventDefault(); 
              var content = '#' + this.id + '-content'; 
              $(content).modal(); 
      }); 
});

Что-то вроде этого должно сделать трюк.

источник

2009-11-02 19:15:43

это прекрасно, спасибо столько eric (ваша клиентская поддержка - ЛУЧШИЙ !!) – 2009-11-04 17:54:31

Решение, требующее меньше разметки, заключается в использовании одного модального «окна». См. Следующий пример:


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Simple Modal Demo</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="simplemodal.js"></script> 
<script type="text/javascript"> 
    $(document).ready(
    function() { 
    $('.loginRequired').bind('click', 
     function() { 
     $('#clickedLink').html(this.id); 
     $('#modalWindow').modal(); 
     return false; 
     } 
    ); 
    } 
); 
</script> 

<style> 
    #simplemodal-container { display: none; } 
    #simplemodal-overlay { background: #000; opacity: 0.4; } 
    #modalWindow { 
    background: #FFF; 
    border: 1px solid black; 
    height: 100px; 
    opacity: 1.0; 
    padding: 10px; 
    position: relative; 
    width: 220px; 
    z-index: 1010; 
    } 
</style> 
</head> 
<body> 
<p><a href="http://example.com/" id="link1" class="loginRequired">Login Required Link</a></p> 
<p><a href="http://example.com/" id="link2" class="loginRequired">Login Required Link</a></p> 
<p><a href="http://example.com/" id="link3" class="loginRequired">Login Required Link</a></p> 
<p><a href="http://example.com/">http://example.com/</a></p> 

<div id="simplemodal-container"> 
    <div id="modalWindow"> 
    <p>Sorry, you must login to click <b id="clickedLink">unknown</b>.</p> 
    <p><a href="#" class="simplemodal-close">Cancel</a></p> 
    </div> 
</div> 

</body> 
</html>

источник

2009-11-10 21:12:04

Простые вопросы Модальные - кратные, исчезающие Content

ответ

Смежные вопросы