需要css到js实现答案

【问题标题】：need css to js implementation需要css到js实现
【发布时间】：2017-04-19 18:43:09
【问题描述】：

我有一个问题要解决。

请参阅下面的链接。

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 在链接中

【问题讨论】：

关注w3schools.com/howto/howto_css_modals.asp
他们只是使用 :target css 选择器来执行此操作...只需删除那些 css 并使用 jquery 代码对其进行初始化
Ssahil，你能帮帮我吗？因为我对 css 很陌生...但只想使用 js 来使用它...

标签： jquery css css-selectors implementation

【解决方案1】：

将此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

【讨论】：

谢谢..它解决了这个问题......我也研究了同样的东西并得到了这个概念..但稍后会研究它

【解决方案2】：

检查this bootstrap 模型是否满足您的需求

JS：

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

【讨论】：

是的...但想使用有问题的共享模式

【解决方案3】：

您可以将此示例与 jquery 一起使用。此代码将打开您的模式，如果它已关闭，或者如果它已经打开，它将关闭。

 $("#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>

【讨论】：