需要css个js实现

Question

我有一个问题需要解决。

请参阅下面的 link。

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 在第 link

Answer 1

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

JS:

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

Answer 2

Things to follow to convert this css to js click event code:

1 Just remove or comment the :target css from the scss file.

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

Write the Js Code

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

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

});

Some additional Css - Added for opening popup logic on click.

*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

Answer 3

您可以将此示例与 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>

需要css个js实现

need css to js implementation

css

jquery

implementation

css-selectors