twitter-bootstrap - 在 Shopify 主题中显示黑屏的 Bootstrap 模态弹出窗口
问题描述
这是我的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">×</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>
我在我的 Shopifytheme.liquid
文件中包含了相同的代码。
当我在独立的 HTML 文件中使用代码时,它工作正常。
但是,当我将它包含在 Shopifytheme.liquid
文件中时,当单击打开模式按钮时,它会显示一个没有弹出模式的半透明黑色空白屏幕。
这是我的 Shopify 网址 - https://laaoo.myshopify.com
可能是什么原因?
解决方案
在您的 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>
推荐阅读
- html - 如何使固定标题宽度为 100%
- python - 如何让驱动程序等待长达 10 秒点击超链接
- html - 如何在媒体查询中隐藏 HTML 元素?
- vba - excel vba替换对话框(ctrl+h)换行
- php - 如何在 /blog 上拥有一个 Apache 服务的 Flask 网站和一个 WordPress 博客?
- bash - 为什么“bash -c”中的命令替换中的变量不可见?
- java - 使用代码将图片从图库移动到可绘制对象。[安卓工作室]
- angular - 通过不同的端口登录Angular Spring
- swift - 条形按钮项目无角半径
- javascript - 如何在二维数组中推送 JSON 数据?