今天有一位朋友有一个产品单页面，每天都在花钱推广，移动端就想做一个“表单咨询、询价”类似于“表单留言“那样的功能。
由于此单页面是一个纯静态的 html 页面，为了方便，我就用 Bootstrap4 来做一个二次开发吧！
当我用到“Bootstrap模态框 ”的时候，结果出现如下效果：
1、整个模态框变成灰色，是 一个无法选中点击状态。
2、模态框既不能点击关闭按钮，也不能点击右上角的叉。
原因：
虽然网上有人说是JS引入的问题，和JQ不兼容引起来的，但是，我敢肯定我这100%是没任问题。
经过我的反复测试：
原因是因为我的 模态框 这个 div 嵌入到 另一个div 里面去了，只要拿出来就可以了。以下是我最初错误的写法：
可以很清楚的看到：
<div class="modal fade" id="myModal">与
<div class="row">是同级。
与
<div class="container-fluid" style="position: fixed;bottom: 0px;">是父子级。
解决方法
我这里的原因就是这个原因，但是，经过我的测试，模态框 div 嵌入 其它的 div 又是正常的。
个人推测，这里应该是：Bootstrap class="container-fluid" 这个div 与 class="modal fade" 这个div不兼容，不能并存的原因吧。
知道了原因，解决方法就非常的简单了，让两个div平级就可以了，不再是父子级。具体代码如下：
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>付杰博客：www.fujieace.com Bootstrap模态框“不能点击关闭按钮”原因与解决方法</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
a.mouse:link {color: #212529} /* 未访问的链接 */
a.mouse:visited {color: #212529} /* 已访问的链接 */
a.mouse:hover {color: #212529;text-decoration:none;background: none;} /* 当有鼠标悬停在链接上 */
a.mouse:active {color: #212529} /* 被选择的链接 */
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<p style="text-align:center;padding: 0;margin: 0;">
<img src="https://www.fujieace.com/fujieace20209/tu/01.jpg?x73259" alt="皮秒仪器" class="img-fluid" />
</p>
<p style="text-align:center;padding: 0;margin: 0;">
<img src="https://www.fujieace.com/fujieace20209/tu/03.jpg?x73259" alt="皮秒仪器" class="img-fluid" />
</p>
<p style="text-align:center;padding: 0;margin: 0;">
<img src="https://www.fujieace.com/fujieace20209/tu/04.jpg?x73259" alt="皮秒仪器" class="img-fluid" />
</p>
<p style="text-align:center;margin-bottom: 50px">
<span style="font-size:24px;"></span><span style="font-size:24px;color:#E53333;">欢迎上门考察，地址：xxxxxxxxxxxx工业二路动感旺岗创意园9栋</span><span style="font-size:24px;"></span>
</p>
</div>
</div>
<div style="position: fixed;bottom: 0px;" class="container-fluid">
<div class="row">
<div class="col" style="background-color:#ffc107;padding: 0px;"> <button type="button" class="btn btn-warning btn-block"> <a href="" class="mouse">在线咨询</a></button></div>
<div class="col" style="background-color:#dc3545;padding: 0px;"> <button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#myModal"> 表单咨询</button></div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog" style="position: relative;top: 52%;" >
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">- 已有<strong id="idauto" style="color: red;">5671</strong>人成功获取报价 -</h4>
</div>
<!-- JS动态计时器，自动增长ID+1，默认从5671开始自动增长-->
<script>
window.onload = function ()
{
var oBody = document.body;
//var oBody = document.getElementById('idauto');
var i = 5671;
//setInterval(updateNum, 1000);
setInterval(updateNum, Math.floor(Math.random()*10001));
updateNum();
function updateNum()
{
oBody.innerHTML = ++i
}
}
</script>
<!-- 模态框主体 -->
<div class="modal-body">
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" action="index.php" autocomplete="on" method="post" enctype="multipart/form-data">
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text" >姓名</span>
</div>
<input type="text" name="name" maxlength="20" class="form-control" placeholder="请输入姓名">
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text" >电话</span>
<span class="input-group-text" style="color: red;background-color: white;">*</span>
</div>
<input type="tel" required="required" name="tel" maxlength="20" class="form-control" pattern="[0-9]+" title="只允许输入数字！" placeholder="请输入手机号">
</div>
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-info">重置</button>
</form>
</div>
</div>
</div>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最终效果：
由于是此产品是一个纯静态的单页面，我也简单搞了一个接收数据的后台，具体代码如下：
index.php
<?php
/**
* Created by PhpStorm.
* User: 付杰博客：fujieace.com
* Date: 2020/10/10
* Time: 15:53
*/
$txt = date('Y-m',time()).'_'.md5('fujieace.com').'.txt';
$file = fopen($txt,"a+");
$name = htmlspecialchars($_POST['name'],ENT_QUOTES);
$tel = htmlspecialchars($_POST['tel'],ENT_QUOTES);
$str = " 姓名：$name ；************ 电话：$tel ；\r\n";
$is_ok = fwrite($file,$str);
if($is_ok && (mb_strlen($name, 'utf8')) <= 20 && (mb_strlen($tel, 'utf8')) <= 20){
fclose($file);
?>
<script language="javascript">
alert("提交成功！");
top.location="<?php echo $_SERVER['HTTP_REFERER']; ?>";
</script>
<?php
}else{
?>
<script language="javascript">
alert("提交失败！请稍后再试！");
top.location="<?php echo $_SERVER['HTTP_REFERER']; ?>";
</script>
<?php
}最终效果：
查看这个txt文件，数据如下：
总结：代码中所涉及到的知识有如下几种：
1、Bootstrap 移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
2、Bootstrap 响应式图片（图片自适应）
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
<img src="https://www.fujieace.com/images/r/b.jpg?x73259" class="img-fluid">
