商品详情div+css+js

<div class="goodsDetail">
        <div class="indexWrap centerWrap">
            <div class="top_bar">
                <!-- 顶部条开始 -->
                <div class="top">
                    <div class="left">
                        <div class="pageleft">
                            <!-- #if($!user)
                            <a href="http://newtest.sdfa.org.cn/" style="float: left">返回山东省足球运动协会</a>&nbsp;
                            <span class="pxlr">$!CommUtil.substring("$!{user.userName}",12)</span>
                            <a style="cursor:pointer;" onclick="logout();" class="lightblue">[退出]</a> 
                            #else -->
                            <span class="pxlr">
                                欢迎&nbsp;<a href="http://newtest.sdfa.org.cn/">王叶波</a>
                            </span>
                            <span class="line"></span>
                            <span class="pxlr">
                                <a href="$!webPath/user/login.htm" class="lightblue">登录</a>
                            </span>
                            <span class="pxlr">
                                <a href="$!webPath/register.htm" class="lightblue">注册</a>
                            </span>
                            <!-- #end -->
                        </div>
                    </div>
                    <div class="right">
                        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                            <!-- <div class="collapse navbar-collapse" id="navbarNavDropdown"> -->
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        首页
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="my_order" role="button"
                                        data-toggle="dropdown" aria-haspopup="true">我的订单</a>
                                    <div class="dropdown-menu" aria-labelledby="my_order">
                                        <a class="dropdown-item" href="#">已购买的宝贝</a>
                                        <a class="dropdown-item" href="#">店铺动态</a>
                                        <a class="dropdown-item" href="#">好友动态</a>
                                        <a class="dropdown-item" href="#">待支付</a>
                                        <a class="dropdown-item" href="#">待收货</a>
                                        <a class="dropdown-item" href="#">待评价</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="business_support" role="button"
                                        data-toggle="dropdown" aria-haspopup="true">商家支持</a>
                                    <div class="dropdown-menu" aria-labelledby="business_support">
                                        <a class="dropdown-item" href="#">商家中心</a>
                                        <a class="dropdown-item" href="#">商家订单</a>
                                        <a class="dropdown-item" href="#">商家商品</a>
                                        <a class="dropdown-item" href="#">我的店铺</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link dropdown-toggle" href="#" id="business_support" role="button"
                                        data-toggle="dropdown" aria-haspopup="true">购物车</a>
                                    <div class="dropdown-menu" aria-labelledby="business_support">

                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        站内短信(<span>1</span>)
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">联系我们：400-000-2989 </a>
                                </li>
                            </ul>
                            <!-- </div> -->
                        </nav>
                    </div>
                    <script>
                        // top部分，鼠标移入移除事件（展示二级菜单）
                        $(document).ready(function () {
                            $('li.dropdown').stop().mouseover(function () {
                                $(this).addClass('open');
                                // $(this).find('a').attr('aria-expanded', true)
                                $(this).find('.dropdown-menu').addClass('show')
                            }).stop().mouseout(function () {
                                $(this).removeClass('open');
                                // $(this).find('a').attr('aria-expanded', true)
                                $(this).find('.dropdown-menu').removeClass('show')
                            });
                        });
                    </script>
                </div>
                <!-- 顶部条结束 -->
            </div>
            <!-- logo区域 -->
            <div class="center_logo_box" style="margin-bottom: 0;">
                <div class="center_main_wrap">
                    <div class="center_left_logo">
                        <img src="" class="logo" alt="">
                        <div>/&nbsp;&nbsp;谁知盘中餐 粒粒皆辛苦</div>
                    </div>
                    <div class="center_right_cover"></div>
                </div>
            </div>
            <!-- logo区域结束 -->
        </div>
        <div class="navigatorBar">
            <div class="bar_main">
                <div>首页</div>
                <div class="active">商品详情</div>
            </div>
        </div>
        <div class="content_wrap">
            <div class="content_main">
                <div class="top">
                    <!-- 放大镜 -->
                    <div class="colOne">
                        <div id="box">
                            <img src="../resources/style/system/front/default/images/sg.png" class="middle" alt="">
                            <div id="filter"></div>
                        </div>
                        <div class="bigImg" id="max">
                            <img src="../resources/style/system/front/default/images/sg.png" id="maxImg" alt="">
                        </div>
                        <div class="thumb">
                            <!-- <div class="prev"><img src="../resources/style/system/front/default/images/prev.png" alt=""></div> -->
                            <div><img src="../resources/style/system/front/default/images/1.png" class="small"
                                    data-url="../resources/style/system/front/default/images/1.png" alt=""></div>
                            <div><img src="../resources/style/system/front/default/images/2.png" class="small"
                                    data-url="../resources/style/system/front/default/images/2.png" alt=""></div>
                            <div><img src="../resources/style/system/front/default/images/loginbg.png" class="small"
                                    data-url="../resources/style/system/front/default/images/loginbg.png" alt=""></div>
                            <div><img src="../resources/style/system/front/default/images/vegetables.png" class="small"
                                    data-url="../resources/style/system/front/default/images/vegetables.png" alt="">
                            </div>
                            <div><img src="../resources/style/system/front/default/images/fruits.png" class="small"
                                    data-url="../resources/style/system/front/default/images/fruits.png" alt=""></div>
                            <!-- <div class="next"><img src="../resources/style/system/front/default/images/next.png" alt=""></div> -->
                        </div>
                    </div>
                    <!-- 规格选择 -->
                    <div class="colTwo">
                        <div class="title">新鲜荔枝 玉荷包荔枝 原筐装 净重5.5斤 生鲜 新鲜水果</div>
                        <div class="specification">
                            <div class="info_item origin_price">
                                <label>商品原价</label>
                                <div class="content" style="text-decoration: line-through;">¥10.01</div>
                            </div>
                            <div class="info_item item_price">
                                <label>店铺价格</label>
                                <div class="content">¥10.01</div>
                            </div>
                            <div class="info_item">
                                <label>商品重量</label>
                                <div class="content">1.1kg</div>
                            </div>
                            <div class="info_item">
                                <label>物流运费</label>
                                <div class="content">¥10.01</div>
                            </div>
                            <div class="info_item">
                                <label>销售情况</label>
                                <div class="content">售出1件（0条评论）</div>
                            </div>
                            <div class="info_item">
                                <label>关注次数</label>
                                <div class="content">23次</div>
                            </div>
                            <div class="info_item">
                                <label>种类</label>
                                <div class="content">
                                    <div class="type" data-type='0'>500g</div>
                                    <div class="type" data-type='1'>1kg</div>
                                    <div class="type" data-type='2'>1.5kg</div>
                                </div>
                            </div>
                        </div>
                        <div class="js-mode">
                            <div class="counter">
                                <input type="text" value="1" id="goods_count">
                                <div>
                                    <div class="counter_add"><img style="width: 13px;height:13px;"
                                            src="../resources/style/system/front/default/images/count_add.png" alt="">
                                    </div>
                                    <div class="counter_reduce"><img style="width: 13px;height: 13px;"
                                            src="../resources/style/system/front/default/images/reduce.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="addToShop" id="open">加入购物车</div>
                            <div class="bugImediate">立即购买</div>
                        </div>
                    </div>
                    <!-- 看了又看 -->
                    <div class="colThree">
                        <div class="title">看了又看</div>
                        <div class="goods_list">
                            <div class="goods_item">
                                <div class="imgWrap">
                                    <img src="../resources/style/system/front/default/images/sg.png" alt="">
                                </div>
                                <div class="ps">海南 妃子笑荔枝2斤装</div>
                                <div class="price">¥99.00</div>
                            </div>
                            <div class="goods_item">
                                <div class="imgWrap">
                                    <img src="../resources/style/system/front/default/images/sg.png" alt="">
                                </div>
                                <div class="ps">海南 妃子笑荔枝2斤装</div>
                                <div class="price">¥99.00</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shop_info">
                    <div class="left">
                        <div class="modeItem">
                            <div class="title">
                                玫瑰与鹿旗舰店
                            </div>
                            <div class="content">
                                <div class="inShop">
                                    <div class="imgWrap"><img
                                            src="../resources/style/system/front/default/images/jdgg.png" alt=""></div>
                                    进店逛逛
                                </div>
                                <div class="conncetSalor">
                                    <div class="imgWrap"><img
                                            src="../resources/style/system/front/default/images/lxmj.png" alt=""></div>
                                    联系卖家
                                </div>
                            </div>
                        </div>
                        <div class="modeItem">
                            <div class="title">
                                店内搜索
                            </div>
                            <div style="padding: 10px 10px;">
                                <div class="form-group"
                                    style="display: flex;align-items: center;margin: 0 auto;margin-bottom: 10px;">
                                    <span
                                        style="width: 50px;font-size: 12px;color: #4D4D4D;display: inline-block;">关键字：</span>
                                    <input style="flex-shrink: 0;width: calc(100% - 70px);" type="text"
                                        class="form-control">
                                </div>
                                <div class="form-group" style="display: flex;margin:0;align-items: center;">
                                    <span style="width: 50px;"></span>
                                    <div class="search-btn">搜索</div>
                                </div>
                            </div>
                        </div>
                        <div class="modeItem">
                            <div class="title">
                                店内分类
                            </div>
                            <div class="body">
                                <div class="item">
                                    <span>所有商品</span>
                                    <div class="imgWrap">
                                        <img src="../resources/style/system/front/default/images/xy.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <span>水果专区</span>
                                    <div class="imgWrap">
                                        <img src="../resources/style/system/front/default/images/xy.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <span>蔬菜专区</span>
                                    <div class="imgWrap">
                                        <img src="../resources/style/system/front/default/images/xy.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <span>蛋类专区</span>
                                    <div class="imgWrap">
                                        <img src="../resources/style/system/front/default/images/xy.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <ul class="nav nav-tabs" style="border: 1px solid rgba(238,238,238,1);">
                            <li style="border-right: 1px solid rgba(238,238,238,1);"><a href="#goods_detail" class="active" data-toggle="tab">商品详情</a></li>
                            <li style="border-right: 1px solid rgba(238,238,238,1);"><a href="#evaluate_detail" class="" data-toggle="tab">评价详情</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="goods_detail" class="tab-pane active">
                                <!-- 如果有数据,展示这个 -->
                                <div class="imgList">
                                    <div class="imgItem">
                                        <a href="goodsDetail.html"><img
                                                src="../resources/style/system/front/default/images/sg.png" alt=""></a>
                                    </div>
                                    <div class="imgItem">
                                        <a href="goodsDetail.html"><img
                                                src="../resources/style/system/front/default/images/sg.png" alt=""></a>
                                    </div>
                                </div>
                                <!-- 如果没有数据，展示这个 -->
                                <!-- <div class="noData">
                                    <div class="imgWrap">
                                        <img src="../resources/style/system/front/default/images/zanwushangpin.png" alt="">
                                    </div>
                                    <div>暂无商品详情</div>
                                </div> -->
                            </div>
                            <div id="evaluate_detail" class="tab-pane">
                                <div class="evaluateLevel">
                                    <div class="desc">
                                        <div>与描述相符</div>
                                        <div class="point">0.0</div>
                                    </div>
                                    <div class="line"></div>
                                    <div class="levelComponent">
                                        <div class="eva_bar_right">
                                            <div class="eva_scroller"> <span style="width:0.0%;"> <em>0.0</em> </span>
                                            </div>
                                            <ul class="scroller_ul">
                                                <li>非常不满意</li>
                                                <li>不满意</li>
                                                <li>一般</li>
                                                <li>满意</li>
                                                <li>非常满意</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="evaluate_info">
                                    <div class="tabs">
                                        <div class="active">全部评价（2）</div>
                                        <div>好评（2）</div>
                                        <div>中评（0）</div>
                                        <div>差评（0）</div>
                                    </div>
                                    <div class="evaluateList">
                                        <div class="ecaluateItem">
                                            <div class="left_tx">
                                                <div class="imgWrap">
                                                    <!-- 头像 -->
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                </div>
                                                <span>热心网友</span>
                                            </div>
                                            <div class="right_pj">
                                                <div class="star">
                                                    <!-- xx.png是激活状态 -->
                                                    <!-- xx1.png是默认状态 -->
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx1.png"
                                                        alt="">
                                                </div>
                                                <div class="content">看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了
                                                    果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单</div>
                                                <div class="imgList">
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ecaluateItem">
                                            <div class="left_tx">
                                                <div class="imgWrap">
                                                    <!-- 头像 -->
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                </div>
                                                <span>热心网友</span>
                                            </div>
                                            <div class="right_pj">
                                                <div class="star">
                                                    <!-- xx.png是激活状态 -->
                                                    <!-- xx1.png是默认状态 -->
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/xx1.png"
                                                        alt="">
                                                </div>
                                                <div class="content">看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了
                                                    果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单</div>
                                                <div class="imgList">
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                    <img src="./resources/style/system/front/default/images/touxiang.png"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hotSale">
            <div class="tit">
                <div class="title">
                    <span class="line"></span>
                    商家热卖
                </div>
                <div style="font-size: 18px;color: #F5B937;">更多></div>
            </div>
            <div class="pro_list">
                <div class="pro_list_item">
                    <div class="img">
                        <img src="../resources/style/system/front/default/images/1.png" alt="">
                    </div>
                    <div>这也不是不知道叫什么的水果这也不是不知道叫什么的水果</div>
                    <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                </div>
                <div class="pro_list_item">
                    <div class="img">
                        <img src="../resources/style/system/front/default/images/rexiao.png" alt="">
                    </div>
                    <div>这也不是不知道叫什么的水果</div>
                    <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                </div>
                <div class="pro_list_item">
                    <div class="img">
                        <img src="../resources/style/system/front/default/images/fruits.png" alt="">
                    </div>
                    <div>这也不是不知道叫什么的水果</div>
                    <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                </div>
                <div class="pro_list_item">
                    <div class="img">
                        <img src="../resources/style/system/front/default/images/bj.png" alt="">
                    </div>
                    <div>这也不是不知道叫什么的水果</div>
                    <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div id="dialog-layer-wrap" class="dialog-layer" style="display:none;">
        <div class="dialog-cover"></div>
        <div class="dialog-cont-wrap">
            <div class="dialog-cont-inner">
                <div id="dialog-close-btn" class="close-btn">
                    <img src="../resources/style/system/front/default/images/close.png" alt="" id="closeImg">
                </div>
                <div class="m-dialog_body">
                    <div class="m-imgWrap">
                        <img src="../resources/style/system/front/default/images/success.png" alt="">
                    </div>
                    <div class="m-msg">
                        <p>已成功添加到购物车！</p>
                        <p>购物车共有<span>2</span>件商品等待结算</p>
                    </div>
                    <div class="m-btns">去购物车结算</div>
                    <div class="m-closeCounter">
                        <span class="m-second" id="m-second">5</span>
                        <span>秒后关闭改页面</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

js部分：

// 提示信息弹出框（比如修改成功，保存成功等操作提示）
    var timer = null;
    window.onload = function () {

        var bd = document.getElementsByTagName('body')[0] || document;
        bd.onclick = function (event) {
            event && event.preventDefault && event.preventDefault()
            event = event || window.event;
            var ele = event.target || event.srcElement;
            var dis;
            if (ele.id == "open") {
                jQuery("#dialog-layer-wrap").animate({
                    opacity: "toggle",
                    height: "toggle"
                }, 'slow')
                // dis = 'block';
                document.getElementById("m-second").innerHTML = 5//初始化时间
                timer = window.setInterval("countDown()", 1000);//开始计时
                document.documentElement.style.overflow = 'hidden';//禁止屏幕滚动
            } else if (ele.id == "closeImg") {
                jQuery("#dialog-layer-wrap").animate({
                    opacity: "toggle",
                    height: "toggle"
                }, 'slow')
                // dis = 'none';
                clearInterval(timer)//关闭计时器
                document.getElementById("m-second").innerHTML = 5//初始化时间
                document.documentElement.style.overflow = 'auto';
            }

            // document.getElementById('dialog-layer-wrap').style.display = dis;
        };

    };

    jQuery('.evaluate_info .tabs div').click(function(e){
        // 输出点击的是什么类型的评价
        // console.log(e.currentTarget.dataset.value)
        jQuery(this).addClass('active').siblings().removeClass('active')
        // 进行数据渲染
    })

    // 设置与描述相符的百分比
    function setPercent(){
        jQuery('.eva_scroller span').width('20%');
    }
    //倒计时
    function countDown() {

        var time = document.getElementById("m-second");
        //获取到id为time标签中的内容，现进行判断
        if (time.innerHTML == 0) {
            jQuery("#dialog-layer-wrap").animate({
                opacity: "toggle",
                height: "toggle"
            }, 'slow')
            //等于0时清除计时
            clearInterval(timer)
            document.getElementById('dialog-layer-wrap').style.display = 'none'
        } else {
            time.innerHTML = time.innerHTML - 1;
        }
    }

    var goodsType;//商品规格
    jQuery('.type').click(function (e) {
        jQuery(this).addClass('active').siblings().removeClass('active');
        goodsType = e.currentTarget.dataset.type
    })

    jQuery('.bugImediate').click(function () {
        if (!goodsType) {
            jQuery.alert('请选择商品规格！', '提示');
            return
        }

        var goods_num = jQuery('#goods_count').val()

        alert('商品规格：' + goodsType);
        alert('商品数量：' + goods_num)
    })




    var aSmall = document.querySelectorAll(".small");
    // colOne
    var oColOne = document.querySelector(".colOne");
    var omiddle = document.querySelector(".middle");

    var oBox = document.getElementById("box");
    var oFilter = document.getElementById("filter");
    var maxImg = document.getElementById("maxImg");
    var max = document.getElementById('max')
    // 鼠标移入小图片，在中图片中显示选择的图片
    for (var i = 0; i < aSmall.length; i++) {
        aSmall[i].onmouseover = function () {
            var src = this.getAttribute("data-url");
            omiddle.src = src;
            maxImg.src = src;
        }
    }
    /放大镜//
    maxImg.style.display = "none";
    oBox.onmouseover = function () {
        maxImg.style.display = "block";
        oFilter.style.display = "block";
        max.style.display = 'block'
        this.onmousemove = function (e) {
            console.log(oColOne.offsetLeft)
            var e = e || event;
            var l = e.pageX - oColOne.offsetLeft - oFilter.offsetWidth / 2;
            var t = e.pageY - oColOne.offsetTop - oFilter.offsetHeight / 2;

            l = l >= oBox.offsetWidth - oFilter.offsetWidth ? l = oBox.offsetWidth - oFilter.offsetWidth : (l <= 0 ? l = 0 : l = l);
            t = t >= oBox.offsetHeight - oFilter.offsetHeight ? t = oBox.offsetHeight - oFilter.offsetHeight : (t <= 0 ? t = 0 : t = t);

            oFilter.style.left = l + 'px';
            oFilter.style.top = t + 'px';

            maxImg.style.left = -2 * l + 'px';
            maxImg.style.top = -2 * t + 'px';
        }
    };
    oBox.onmouseout = function () {
        oFilter.style.display = "none";
        maxImg.style.display = "none";
        max.style.display = 'none'
    }



    // 点击增加数量
    jQuery('.counter_add').click(function () {
        vertifyNum()
        if(vertifyNum()){
            var num = jQuery('#goods_count').val()
            num++
            jQuery('#goods_count').val(num)
        } else {
            jQuery.alert({
                title:'提示',
                content:"请输入有效数字！",
                buttons:{
                    ok:{
                        text:"确定",
                        action:function(){
                            jQuery('#goods_count').val(1)
                        }
                    }
                }
            })
        }
    })


    // 数量减少
    jQuery('.counter_reduce').click(function () {
        if(vertifyNum()){
            var num = jQuery('#goods_count').val()
            // 拿到当前值时先判断极值
            if (num <= 1) {
                jQuery.alert('商品数量不能小于1！', '提示')
                return
            }

            num--
            jQuery('#goods_count').val(num)
        } else {
            jQuery.alert({
                title:'提示',
                content:"请输入有效数字！",
                buttons:{
                    ok:{
                        text:"确定",
                        action:function(){
                            jQuery('#goods_count').val(1)
                        }
                    }
                }
            })
        }
    })

    // 进行数字验证：
    function vertifyNum(){
        var num = jQuery('#goods_count').val();
        var re = /^[1-9]+[0-9]*]*$/ ;   //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/   
        if(!re.test(num)){
            return false;
        } else {
            return true
        }
    }

其他静态资源：

<link rel="stylesheet" href="./resources/style/system/front/default/css/reset.css">
    <link rel="stylesheet" href="./resources/style/system/front/default/css/common.css">

    <link rel="stylesheet" href="./resources/style/system/front/default/css/goodsDetail.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">



    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>