时间戳

首页 > 解决方案 > 模态弹出窗口未打开

html - 模态弹出窗口未打开

问题描述

我正在使用 WordPress 创建一个网站。我将 Popbox 用于 Elementor，但我遇到了问题。Button 有效，但没有出现模式弹出窗口。

引导程序.css

.fade {
 opacity: 0;
 -webkit-transition: opacity .15s linear;
      -o-transition: opacity .15s linear;
         transition: opacity .15s linear;
}
.fade.in {
 opacity: 1;
}

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
 position: absolute;
 clip: rect(0, 0, 0, 0);
 pointer-events: none;
}

.close {
 float: right;
 font-size: 21px;
 font-weight: bold;
 line-height: 1;
 color: #000;
 text-shadow: 0 1px 0 #fff;
}
.close:hover,
.close:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;

}
.modal-content .close {
   background-color: transparent !important;
}

button.close:hover {
   filter: alpha(opacity=50);
 opacity: .5;
}


button.close {
 -webkit-appearance: none;
 padding: 5px;
 cursor: pointer;
 border: 0;
   position: inherit;
   z-index: 999999999;
   display: none;
}
.modal-open {
 overflow: hidden;
}
.modal {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1050;
 display: none;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 outline: 0;
}
.modal.fade .modal-dialog {
 -webkit-transition: -webkit-transform .3s ease-out;
      -o-transition:      -o-transform .3s ease-out;
         transition:         transform .3s ease-out;
 -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
      -o-transform: translate(0, -25%);
         transform: translate(0, -25%);
}
.modal.in .modal-dialog {
 -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
         transform: translate(0, 0);
}
.modal-open .modal {
 overflow-x: hidden;
 overflow-y: auto;
}
.modal-dialog {
 position: relative;
 margin: 10px;
}
.modal-content {
 position: relative;
   margin: 0 auto;
 background-color: #fff;
 -webkit-background-clip: padding-box;
         background-clip: padding-box;
 border: 1px solid #999;
 border: 1px solid rgba(0, 0, 0, .2);
 border-radius: 6px;
 outline: 0;
 -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
         box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1040;
 background-color: #000;
}
.modal-backdrop.fade {
 filter: alpha(opacity=0);
 opacity: 0;
}
.modal-backdrop.in {
 filter: alpha(opacity=50);
 opacity: .5;
}
.modal-header {
 padding: 15px;
 border-bottom: 1px solid #e5e5e5;
 display: none;
}
.modal-header .close {
 margin-top: -2px;
}
/*.modal-title {
 margin: 0;
 line-height: 1.42857143;
}*/
.modal-body {
 position: relative;
 /*padding: 15px;*/
}
.modal-footer {
 padding: 15px;
 text-align: right;
 border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
 margin-bottom: 0;
 margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
 margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
 margin-left: 0;
}/*
.modal-scrollbar-measure {
 position: absolute;
 top: -9999px;
 width: 50px;
 height: 50px;
 overflow: scroll;
}*/
@media (min-width: 768px) {
 .modal-dialog {
   margin: 30px auto;
 }
 .modal-content {
   -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
           box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
 }
 .modal-sm {
   width: 300px;
 }
}
@media (min-width: 992px) {
 .modal-lg {
   width: 900px;
 }
}

.hide {
 display: none !important;
}
.show {
 display: -webkit-box !important;
}

标记

<a class="elementor-button elementor-size-sm modal-popup" data-target="#popup-289" onclick="ga('send', 'event', 'modal-popup-289', 'Click', 'PopBox Button Clicked');">
    <span class="elementor-button-content-wrapper">
        <span class="elementor-button-text">Click me</span>
    </span>
</a>

有一个画面：

有屏幕

标签： htmlcsstwitter-bootstrap

解决方案

您必须从 html 定位您的元素

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这里 data-target="#exampleModal" 是针对元素的，您还必须添加 js。概念是当您单击“启动演示模式”时，它将弹出下面的容器。

推荐阅读