今天有一位朋友有一个产品单页面,每天都在花钱推广,移动端就想做一个“表单咨询、询价”类似于“表单留言“那样的功能。
由于此单页面是一个纯静态的 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
}
最终效果:
总结:代码中所涉及到的知识有如下几种:
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">