: target modalDialog not opening

Question

I have a menu for slides (using the 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>

Clicking on any link opens a modal dialog box with the slide opening correctly (using 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 for modal:

.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;
}

Full JSFiddle here: http://jsfiddle.net/j7tua7rL/18/

Unfortunately, the modal dialog does not open when I click on any of the links. Why is this so?

Answer 1

I checked your code. I found that the problem is with jQuery. The problem e.preventDefault();causes the problem:

This is what I need:

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

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

Here is updated 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. preventDefault, . .