记录－交流－Web开发知识分享
如果使用 JavaScript 则：
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
如果是“show”
$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');
或者在 HTML 中：
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
…
情况如下：
<div class="footfixed" style="cursor:pointer" οnclick="toAdvertDetail('${appPath}home/showNewsDetail?newsId=4');" >
<div class="close" onClick="event.cancelBubble = true"> </div>
</div>
<!-- 底部悬浮end -->
外层的div有一个点击跳转事件，按钮div也是一个点击事件用来隐藏整个div，产生的问题是，点击了关闭按钮了同事会触发父级div的跳转事件，
解决方法： 在子级div上增加一个事件 onClick="event.cancelBubble = true"，这样就可以只触发自身的点击事件了
…
这几天在写项目的中，页面使用了iframe，然而在子页面中使用bootstrap的模态框时发现：弹出的模态框位置是以子页面为标准居中的，并且遮罩层也只有子页面那一部分，整个页面简直无法直视，所以思考可以可以让模态框以父页面为标准弹出，经过在网上查找资料，总结了一种解决方法。
效果展示
修改前页面
修改后页面
实现思路
要想使模态框在顶级页面打开，我想到的方法是使bootstrap的模态框弹在父页面弹出即可。
首先我们将需要弹出的div单独写一个页面，当子页面需要弹出时，在父页面弹出div即可。
将模态框单独写为一个页面
主页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="modal 
媒体查询是一种 CSS 语言功能，它允许作者根据正在查看应用程序的设备或窗口的特征有条件地应用 CSS 规则。最常见的是，这些可能是根据视口宽度，允许 CSS 作者创建响应于正在查看的窗口或设备的大小的组件和布局。但这也可能扩展到用户是否喜欢浅色或深色模式，甚至用户的可访问性首选项，以及更多属性。
随着如此多不同的设备类型和屏幕尺寸的兴起，Web 应用程序向用户提供更加定制的视觉呈现并针对其首选交互方法的屏幕尺寸进行优化变得越来越重要。
响应式设计可以通过多种技术的组合来完成，包括有条件地应用 CSS 规则与媒体查询、容器查询，以及根据其所容纳的内容选择灵活的布局（例如 Flexbox 或网格）。在本文中，我们将重点关注媒体查询和响应式布局，但随着浏览器支持长尾的增加，容器查询也需要牢记。截至撰写本文时，它们尚未准备好进入黄金时段，但可用于渐进增强。
移动优先设计是设计和构建响应式 Web 应用程序时可以采用的原则。理想情况下，这种方法应该作为整个过程的所有阶段（从开始到结束）的指导原则。对于设计而言，这意味着线框或 UI 设计的第一次迭代应重点关注移动体验，然后再转向更宽的视口尺寸。
虽然您可以从另一个方向（宽优先）处理 Web 应用程序，但与尝试将组件塞进较小的屏幕空间相比，随着更多的屏幕空间变得可用，以可视方式重新组织组件是一个更容易的过程。
类似的规则也适用于开发过程。一般来说，您应该为基本情况（最窄的屏幕）编写标记和样式，并在必要时逐步为更宽的屏幕应用条件样式。
虽然您可以从另一个方向实现这一点，或者混合使用窄优先和宽优先的方法，但这可能会使您的样式更难以理解，并增加其他人在审查或维护时的精神负担。当然，也有例外，编写少量的宽优先规则会更简单，因此请酌情考虑。
在发布了 Chrome 114 稳定版之后，Google 目前已将开发重心转向了下一个版本 —— Chrome 115。Chrome 115 中的一些新功能也逐渐被揭晓，其中一个有趣的开发者实验功能是为独立的 Web 应用引入了无边界模式（borderless mode）。
目前，Chrome 浏览器在默认情况下会显示网站内容和众多界面元素，其中包括地址栏、工具栏图标，窗口控制按钮以及标题栏等。
当为已安装的桌面 Web 应用程序启用无边界模式之后，Web 应用的整个窗口会扩展到覆盖整个浏览器 —— 包括浏览器的标题栏区域和窗口控制按钮（关闭、最大化、最小化）。Web 应用程序开发人员负责整个窗口的绘制和输入处理。
Google 给出了这个模式的几个使用场景：
借助这个模式，Chrome 可以让 Web 应用的显示空间最大化；其次，开发者还可以自定义标题栏区域，以便这些 Web 应用无论是看起来还是使用起来都更像是原生的桌面应用程序。
在官方给出的示例中，无边界模式下的 Web 应用看起来可以是下面这样的，但外观样式最终将完全取决于开发者采用的实现方式。
除了无边界模式，Chrome 115
弹出窗口在网络上随处可见。您可以在菜单、切换提示和对话框中看到它们，它们可能表现为帐户设置、披露小部件和产品卡预览。尽管这些组件非常流行，但在浏览器中构建它们仍然非常麻烦。您需要添加脚本来管理焦点、打开和关闭状态、组件的可访问挂钩、用于进入和退出体验的键盘绑定，甚至在您开始构建弹出窗口的有用、独特的核心功能之前就已经完成了这一切。…
介绍一个和深色模式相关的CSS属性：color-scheme
color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案，语法如下
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;… 解决ajax post提交 跨域 cors问题
在nginx配置文件中加
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers *;
注意:要在nginx中加,在php文件中加这些头是无效的.
…
gulp官方入门安装：https://gulpjs.com/docs/en/getting-started/quick-start
Gulp 和Webpack的基本区别：
gulp可以进行js，html，css，img的压缩打包，是自动化构建工具，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。
Webpack是前端构建工具，实现了模块化开发和文件处理。他的思想就是“万物皆为模块”，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。
在实际当中会将两种都选择混合使用。虽然两个都可以进行代码的压缩合并减少代码体积，但gulp.config.js中gulp的代码更加简单易懂，需要压缩合并谁就用哪个方法，而webpack样式合并需要在node环境下下载插件才能使用。另一点，gulp 是基于流的打包工具，需要谁，引用谁，并且他的压缩简单明了，后期维护起来方便，webpack则可以将具体的模块进行划分，需要哪个模块就加载哪个模块，实现按需加载，并且排除掉冗余代码，减少代码体积。
总结起来就是，gulp是基于流的自动化构建工具，但不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能。二者侧重点不同，我认为相互结合使用会提高代码质量和代码的优化。
…
a = [1,2,3,4,5]
b = [3,4,5]
a只保留[1,2]
答:
a = [1, 2, 3, 4, 5];
b = [3, 4, 5];
a = a.filter(item => …
近期评论