Bootstrap模态框“不能点击关闭按钮”原因与解决方法

今天有一位朋友有一个产品单页面,每天都在花钱推广,移动端就想做一个“表单咨询、询价”类似于“表单留言“那样的功能。

 

由于此单页面是一个纯静态的 html 页面,为了方便,我就用 Bootstrap4 来做一个二次开发吧!

 

当我用到“Bootstrap模态框 ”的时候,结果出现如下效果:

1、整个模态框变成灰色,是 一个无法选中点击状态。

2、模态框既不能点击关闭按钮,也不能点击右上角的叉。

Bootstrap整个模态框变成灰色,是 一个无法选中点击状态。

 

原因:

虽然网上有人说是JS引入的问题,和JQ不兼容引起来的,但是,我敢肯定我这100%是没任问题。

 

经过我的反复测试:

原因是因为我的 模态框 这个 div 嵌入到 另一个div 里面去了,只要拿出来就可以了。以下是我最初错误的写法:

Bootstrap模态框

 

可以很清楚的看到:

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

最终效果:

Bootstrap模态框

 

 

由于是此产品是一个纯静态的单页面,我也简单搞了一个接收数据的后台,具体代码如下:

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文件,数据如下: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">

 

3、JS计数器 自动加+ 1

    A+
发布日期:2020年10月10日 18:48:25  所属分类:JavaScript
最后更新时间:2020-10-10 19:20:59
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
标签:
付杰
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 49.9元
  • 市场价:99.9元
Microsoft 全家桶 “激活码/产品密钥”永久
Microsoft 全家桶 “激活码/产品密钥”永久
  • ¥ 29.99元
  • 市场价:888元
wordpress站群服务 泛解析二级域名 二级目录
wordpress站群服务 泛解析二级域名 二级目录
  • ¥ 1999.9元
  • 市场价:8999元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 1999.9元
  • 市场价:20000元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: