Question

我正在尝试制作一个适用于Chrome的引导模式对话框，也适用于Firefox（两个最新版本）。我已经做了一些研究，似乎Firefox在显示应用了.fade类的模态对话框时遇到了问题，尽管对话框确实显示了 - 我弹出一个完全黑屏的窗口（根本没有内容）。从HTML标记中删除.fade类时，对话框根本不显示。

HTML涉及：

 //Modal target <a>
<a data-target="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
    Project Title 2
</div>
</div>
</a>

 //The modal
 <div class="portfolio-modal modal" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="backgrid" data-dismiss="modal">
            <i class="icon ion-grid size-48"></i>
        </div>
        <div class="close-modal" data-dismiss="modal">
            <i class="icon ion-ios-close-empty size-96"></i>
        </div>
        <div class="container">
            <h2></h2>
            <hr>
            <div class="row">
                <div class="col-md-8">

                </div>
                </div>
                <div class="col-md-4">

                <button type="button" class="border-button-black" data-dismiss="modal">CLOSE</button>
                </div>
            </div>
        </div>
    </div>
</div>

    //Computed css values displayed in chrome console
    element {}
   .modal-backdrop.in {filter: alpha(opacity=50);opacity: .5;}
   .modal-backdrop.fade {filter: alpha(opacity=0);opacity: 0;}
   .fade.in {opacity: 1;}
   .modal-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;background-color: #000;}
   .fade {opacity: 0;-webkit-transition: opacity .15s linear;-o-transition: opacity .15s linear;transition: opacity .15s linear;}* {margin: 0;padding: 0;opacity: 1 !important;}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
  section, body {font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';font-weight: 400;font-size: 16px;color: black;}
body {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;}

另外需要注意的是，当点击应用了淡化类的模态并检查被遮挡的窗口时，它似乎跳转到未在标记中的任何位置定义且没有内容的节点。

//The following is what the console finds when inspecting the dialog window
<div class="modal-backdrop fade in"></div>

我似乎无法找到问题所以我想知道是否有人可以让我深入了解可能出现的问题，谢谢！

引导模式对话框在firefox

0 个答案: