Question

我有一个幻灯片链接菜单（使用光滑的滑块）：

<ul class="links">
    <li><a href="#openModal">Slide 1</a></li>
    <li><a href="#openModal">Slide 2</a></li>
    <li><a href="#openModal">Slide 3</a></li>
    <li><a href="#openModal">Slide 4</a></li>
    <li><a href="#openModal">Slide 5</a></li>
    <li><a href="#openModal">Slide 6</a></li>
</ul>

点击任意链接打开一个模式对话框，打开正确的幻灯片（使用CSS :target）：

<div id="openModal" class="modalDialog">
<div class="modalBox">
<section class="slider">
    <div>slide1</div> <!-- slides -->
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>
</div>
</div>

模态的CSS：

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align:center;
    z-index: 99999;
    opacity:0;
    visibility:hidden;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
    visibility:visible;
}

完整的JSFiddle：http://jsfiddle.net/j7tua7rL/18/

不幸的是，当我点击任何链接时，模态对话框无法打开。为什么会这样？

Answer 1

我检查了你的代码。我发现jQuery的问题。 Focus导致问题：

这对我有用：

e.preventDefault();

此处已更新http://jsfiddle.net/j7tua7rL/19/

Answer 2

您必须在链接上设置特殊属性：

data-toggle="modal" data-target="#openModal"

编辑：你的模态javascript与滑块代码冲突

$('.links').on('click', 'a', function( e ) {
    var slideIndex = $(this).closest('li').index();
    $slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
    e.preventDefault();
});

为了使其工作，您必须使用另一个类，在button内创建li或在a周围创建一个包装。您可以尝试删除阻止a实现目标的preventDefault。或者只使用数据属性。

：目标modalDialog无法打开

2 个答案: