：目標modalDialog不開放

我有幻燈片鏈接（使用光滑滑塊）菜單：：目標modalDialog不開放

<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/

不幸的是，當我點擊任何鏈接時，模態對話框不會打開。爲什麼？

來源

2015-12-14 user3615851

我已檢查您的代碼。我發現這個問題與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/

來源

2015-12-14 19:11:31

你要上的鏈接設置的特殊屬性：

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(); 
});

衝突的爲了使其工作，你將不得不使用另一個班級，在li內部創建一個button或在a周圍創建一個包裝。您可以嘗試刪除阻止a實現目標的preventDefault。或者只是使用數據屬性。

來源

2015-12-14 19:06:52

：目標modalDialog不開放

回答

相關問題