javascript - :target modalDialog not opening

Question

我有一个幻灯片链接菜单(使用光滑的 slider ):

<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 的问题。 e.preventDefault(); 导致了问题:

这是对我有用的:

var $slideshow = $(".slider").slick();

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

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