需要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

回答

相关问题