Question

这是我的html代码：

      <!doctype html>
      <html> 
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

      </head>

      <body >

        <div class="container">
        <h2>Modal Example</h2>
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
          Open modal
        </button>

        <!-- The Modal -->
        <div class="modal" id="myModal" >
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- Modal body -->
              <div class="modal-body">
                Modal body..
              </div>

              <!-- Modal footer -->
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
              </div>

            </div>
          </div>
        </div>
        </body>

        </html>

我在Shopify theme.liquid文件中包含了相同的代码。

当我在独立的HTML文件中使用代码时，它可以正常工作。

但是，当我将其包含在Shopify theme.liquid文件中时，单击“打开模式”按钮时，它将显示一个半透明的黑色空白屏幕，而没有弹出模式。

这是我的Shopify网址-https://laaoo.myshopify.com

可能是什么原因？

Answer 1

在Angularjs控制器中，添加以下代码：

$scope.removeGreyScreen = function () { $(".modal-backdrop").remove(); };

并在关闭按钮上，按如下所示调用上述函数

ng-click="removeGreyScreen()"

基本上，

<div class="modal-footer">
   <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="removeGreyScreen()">Close</button>
</div>

Bootstrap Modal Popup在Shopify主题中显示黑屏

1 个答案: