需要css才能執行js

請參閱下面的鏈接。

HTML如下....

<div class="wrap"> 

<a href="#modal-one" class="btn btn-big">Modal!</a> 

</div> 

<!-- Modal --> 
<div class="modal" id="modal-one" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-header"> 
    <h2>Modal in CSS?</h2> 
    <a href="#" class="btn-close" aria-hidden="true">×</a> 
</div> 
<div class="modal-body"> 
    <p>One modal example here! :D</p> 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn">Nice!</a> 
    </div> 
</div> 
</div> 
<!-- /Modal -->

當模態按鈕被點擊彈出的對話框中顯示帶有動畫。但我想用jQuery來完成這件事。我不太瞭解CSS，所以我無法獲得任何東西。任何人都可以幫忙嗎？

和CSS是條鏈接

來源

2017-04-19 ghetal

遵循這一https://www.w3schools.com/howto/howto_css_modals.asp –

他們只是使用：目標CSS選擇器要做到這一點......只是刪除這些CSS和使用jQuery代碼 –

Ssahil intialize它，你能幫我嗎？因爲我對css非常陌生......但想用這個只能用js ... – ghetal

觀光遵循這個CSS轉換成js的單擊事件代碼：

1只需從scss文件中刪除或註釋：target css。

// &:target { 
    // // Active animate in modal 
    // &:before { 
    //  display: block; 
    // } 
    // .modal-dialog { 
    //  .translate(0, 0); 
    //  top: 20%; 
    // } 
    // }

收件JS代碼

// With JAvascript =D 
$('a[href="#modal-one"]').click(function(){ 
    $('.modal').addClass('open'); 

}); 
$('.close').click(function(){ 
    $('.modal').removeClass('open'); 

});

一些額外的CSS - 點擊時添加用於打開彈出式邏輯。

*Additional Css Added */ 
.modal.open .modal-dialog { 
    transform:translate(0,0); 
    top:20%; 
    } 
.modal.open::before { 
    content: ""; 
    display: block; 
    background: rgba(0, 0, 0, 0.6); 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 10; 
}

這裏是更新CODEPEN

來源

2017-04-19 10:32:00

謝謝..它解決了這個問題......我也研究過相同，並得到了這個概念..但稍後會看看它 – ghetal

歡迎:) –

檢查this引導模式可滿足您

JS：

jQuery(document).ready(function(e) { 
    jQuery('#mymodal').trigger('click'); 
});

來源

2017-04-19 10:07:06

是的......但是想用共享的模態 – ghetal

您可以使用此示例與jquery.This代碼將打開你的模式，如果它的關閉，或者如果它已經打開它將會關閉。

$("#kullaniciModal").modal("toggle"); 

<div class="modal fade" id="kullaniciModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Kullanıcılar</h4> 
       </div> 
       <div class="modal-body"> 

        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button> 
        </div> 
       </div> 
      </div> 
     </div>

來源

2017-04-19 10:36:38

需要css才能執行js

回答

相關問題