Ссылка внутри пролета с дисплеем: нет; стиль виден

Question

Так я использую диалоговое окно JQuery UI, как это:

$(document).ready(function() { 

    // vytvorenie kurzu 
    $('a.openModalBox').click(function(e) { 
     var href = $(this).attr('href'); 
     if ('#/' == href) { 
      e.preventDefault(); 
      $('span.modalBoxContent').dialog({ 
       modal: true, 
       resizable: false, 
       title: 'Upozornenie', 
       zIndex: 1, 
       show: 'fast', 
       hide: 'slow', 
       width: 600, 
       height: 90, 
       position: 'middle' 
      }).width(600); 
     } 
    }); 

}); 

Мой HTML выглядит следующим образом:

<a href="#/" class="next openModalBox lessOpacity"> 
    Go forward 
<span class="modalBoxContent"> 
    <p style="font-size: .8em; text-align: center;"> 
      Lorem ipsum.<br /> 
      Lorem ipsum <a href="/index/index" class="accessible-link">lorem ipsum</a>. 
     </p> 
</span> 
</a> 

И соответствующий CSS является:

span.modalBoxContent { 
    display: none; 
} 

это работает отлично, когда есть только текст внутри span.modalBoxContent. но если есть HTML-код, тогда прослойка не полностью скрыта. В этом случае (см. Выше HTML) ссылка видна.

Как это возможно и как его решить?

Answer 1

valid HTML.

A span элемент не может содержать элемент p. В попытке восстановить из-за ошибки ваш браузер заканчивает span незадолго до того, как он запустит p, а затем проигнорирует конечный тег для span как еще одну ошибку. (a элементы также встроены, а также не могут удерживать элементы уровня блока, такие как p)

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

<a href="#id_of_related_content">link text</a> 
<div id="id_of_related_content"> 
    Your initially hidden content here 
</div> 

Не забудьте сделать link's href attribute to point to something sensible.