前端页面整合及模态框使用总结

最新推荐文章于 2021-03-18 02:34:19 发布

暖阳常伴

最新推荐文章于 2021-03-18 02:34:19 发布

阅读量547

点赞数

分类专栏：前端文档分享文章标签：页面整合模态框

本文链接：https://blog.youkuaiyun.com/qq_42786011/article/details/102469171

版权

前端文档分享专栏收录该内容

55 篇文章

订阅专栏

IM笔记

模态框
1. 多个按钮同时控制一个模态框时要加一个公共变量例如 var flag = true 来控制显隐效果。
2. 记得清楚或者带入模态框的数据。
3. 遇到逻辑太复杂，多个变量无法控制同一模态框，或者模态框样式功能类似却发生冲突的情况下可以另外开一个模态框，避免不必要的混淆。

<!--逻辑框-->
    <div class="chat_evaluate_dialog"></div>
    <!--遮罩层-->
    <div class="black"></div>
    
    <!--样式-->
    .black {
    background: #000000;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    display: none;
}

页面整合
1. 一般混合开发的页面存放到服务器端，而js,css,img等静态资源另外放置到不同的服务器。
2. 修改js,css等文件资源只需要编写好代码，借助FTP等工具完成服务器资源覆盖即可，但是页面通常修改要通知后台更新，部署，比较繁琐，所以提出页面整合方案。
3. 一来方便页面的修改，二来压缩了页面体积，长篇一律的页面用一个div加一段js就搞定了，下来不到1kb。
4. 如下第一段是很长一段代码，第二段是整合后的。

<!--未整合-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IM</title>
    <link rel="stylesheet" href="//www.dhresource.com/user/crm/imcustomer/css/chartwrap.css">
</head>

<body>
    <button class="im_msg">联系客服</button>
    <div class='pc_greatbear'>
        ....此处省略千行
    </div>
    <div class='black'></div>
    <script type='text/javascript' src='//js.dhresource.com/seller/common/jquery.js'></script>
    <script type='text/javascript' src='//js.dhresource.com/webim/core/base.js'></script>
    <script type='text/javascript' src='//js.dhresource.com/webim/core/connect.js'></script>
    <script type='text/javascript' src='//js.dhresource.com/webim/core/upload.js'></script>
    <script type='text/javascript' src='//www.dhresource.com/user/crm/imcustomer/js/art-template.js'></script>
    <script src='//www.dhresource.com/user/crm/imcustomer/js/jquery.xml2json.js'></script>
    <script src='//www.dhresource.com/user/crm/imcustomer/js/tracking.js'></script>
    <script src='//www.dhresource.com/user/crm/imcustomer/js/tdrag.js'></script>
    <script src='//www.dhresource.com/user/crm/imcustomer/js/chat-main.js'></script>
    <script src='//www.dhresource.com/user/crm/imcustomer/js/chat-im.js'></script>
    <script src='//www.dhresource.com/dhs/fob/js/common/track/dhta.js' type='text/javascript'></script>
</body>
</html>

<!--整合后的-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>IM</title>
    <link rel="stylesheet" href="//www.dhresource.com/user/crm/imcustomer/css/chartwrap.css">
</head>

<body>
    <button class="im_msg">联系客服</button>
    <script src="//www.dhresource.com/user/crm/imcustomer/js/im_seller.js"></script>
</body>

</html>

5. 想知道js是怎么整合的吗？哈哈很简单，推荐一个网址一键整合[：HTML/JS转换工具-站长工具