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。

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。

内部链接与display：none;风格是可见的

1 个答案: