Twitter bootstrap 引导模式弹出窗口显示Shopify主题中的黑屏_Twitter Bootstrap_Bootstrap Modal_Shopify

Twitter bootstrap 引导模式弹出窗口显示Shopify主题中的黑屏

twitter-bootstrap shopify

Twitter bootstrap 引导模式弹出窗口显示Shopify主题中的黑屏,twitter-bootstrap,bootstrap-modal,shopify,Twitter Bootstrap,Bootstrap Modal,Shopify,以下是我的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-w

以下是我的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 URL-

原因可能是什么？

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


接近

我没有使用Angular使用此代码“$（“.modal background”）.remove（）；”并从JQuery或javascript的按钮单击事件调用它。