一段纯脚本的modal，没用框架

最新推荐文章于 2022-06-16 07:33:32 发布
最新推荐文章于 2022-06-16 07:33:32 发布
阅读量741 收藏
点赞数
分类专栏： web前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_hy/article/details/13293311
版权 
<div id="wechat_modal" style="background-clip: padding-box;background-color: #FFFFFF;border: 1px solid rgba(0, 0, 0, 0.3);  border-radius: 6px 6px 6px 6px;  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); left: 50%; margin: -200px 0 0 -200px;overflow: hidden; position: fixed; top: 50%; width:360px;height:360px; overflow:hidden;font:14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;">
<div id="wechat_modal_header" style="border-bottom: 1px solid #EEEEEE; padding: 9px 15px;"><a style="text-decoration:none;  margin-top: 2px; color: #000000; float: right;  font-size: 20px;  font-weight: bold; cursor:pointer;line-height: 20px; opacity: 0.2; text-shadow: 0 1px 0 #FFFFFF;" οnclick="javascript:document.getElementById('wechat_modal').style.display='none';" target="_self">×</a><h3 id="jiathis_weixin_h3" style=" line-height: 30px; margin: 0; font-weight:normal; font-family:" 微软雅黑";"="">分享到微信朋友圈</h3></div>
<div style="text-align:center;height:251px;margin:0;padding:0;"><p style="margin:0;padding:0;"><img src="" alt="二维码加载失败" style="margin-top:15px;" width="220" height="220"></p>
</div>
<div style=" background-color: #F5F5F5;  border-radius: 0 0 6px 6px; border-top: 1px solid #DDDDDD; box-shadow: 0 1px 0 #FFFFFF inset; height:100%;padding:0 10px;padding-top:11px;text-align: right; font-size:12px;"><div style="text-align:left;margin:0; padding:0;font-size:12px;">打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。 <a href="" target="_blank">如何使用？</a></div>
</div>
</div>

弘毅致远
关注
专栏目录
php不用框架怎么写,教你在不使用框架的情况下也能写出现代化 PHP 代码
weixin_29650949的博客
03-09 1257
file我为你们准备了一个富有挑战性的事情。接下来你们将以 无 框架的方式开启一个项目之旅。首先声明， 这篇并非又臭又长的反框架裹脚布文章。也不是推销 非原创 思想 。毕竟， 我们还将在接下来的开发之旅中使用其他框架开发者编写的辅助包。我对这个领域的创新也是持无可非议的态度。这无关他人，而是关乎己身。作为一名开发者，它将有机会让你成长。也许无框架开发令你受益匪浅的地方就是，可以从底层运作的层面中汲...
Bootstrap 模态框（Modal）
Camel
01-29 1245
#Bootstrap 模态框（Modal）插件 详细讲解 #####第一步： 加载框架： https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 2.bootstrap.js 或压缩版的 bootstrap.min.js #####第二步： 用法 您可以切换模态框（Modal）插件的隐藏内容： 通过 data 属性：在控...
Bootstrap系列之模态框（Modal）
老__L的博客
06-16 1万+
模态框（Modal）
Bootstrap框架中弹出窗（modal）遇到的一些问题
yaly200的博客
09-20 884
今天就在使用Bootstrap框架中遇到的一个问题分享一下，在产品开发的过程中使用了大量的弹出窗（modal）。 刚开始学习使用的过程中就发现此窗口不能垂直居中，总是偏上，并且不能拖动，看了一下使用...
4.1 纯css、html实现模态框（不用js）
火星人有可乐的博客
08-23 876
适用于前端入门小白的文章，如果刚好学了HTML、CSS,又还没有学习javascript，jQuery，但又想实现点击弹出一个小窗口框在原来的页面上，同时又能点击关闭这个小窗口。
一个支持ff的modaldialog的js代码
10-31
在本节中，我们将深入探讨一个支持Firefox（FF）的ModalDialog的JavaScript代码，并对其进行详细的解析和分析。 ModalDialog简介 ModalDialog是一种常见的用户界面元素，可以在网页中弹出一个对话框，以便用户输入...
Moa Modal一款轻巧的modal弹出层插件
11-10
- **易于集成**: Moa Modal的API简单直观，无论是独立使用还是与其他框架（如jQuery、React、Vue等）结合，都能方便地进行集成。 - **响应式设计**: 支持移动设备，能根据屏幕尺寸自动调整布局，确保在不同设备上都...
react-native-modal-popover：使用Modal的React-Native纯JS popover
02-05
纯JS popover组件，用于本机 关于本模块 原始的现在已过时，因此我决定发布自己的模块，以避免在package.json中使用github url。 在重写过程中有些东西丢失了，但是现在它使用了Modal和本机动画驱动程序，并且还具有...
modAL：适用于Python的模块化主动学习框架
02-03
modAL是一个针对Python3的主动学习框架，在设计时考虑了模块化，灵活性和可扩展性。 它基于scikit-learn构建，使您可以几乎完全自由地快速创建主动学习工作流程。 而且，您可以轻松地用定制的解决方案替换零件，从而...
Bootstrap modal只加载一次数据的解决办法(推荐)
08-28
Bootstrap Modal 只加载一次数据的解决办法 Bootstrap 模态框是一种非常常用的用户界面组件，它可以用来展示一些重要的信息或提示用户进行某些操作。然而，在使用 Bootstrap Modal 时，有一些需要注意的问题，其中...
从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）...
weixin_34354173的博客
04-08 312
结论请看最后的图片 关于定义： margin：层的边框以外留的空白 background-color：背景颜色 background-image：背景图片 padding：层的边框到层的内容之间的空白 border：边框 content：内容 关于四个方向： 先上图： 测试：（有些结论是验证后copy现有的，因为纯测试不可能推出必然结...
响应式前端框架Bootstrap系列（16）模态框（Modal）插件
@黄小泽的个人博客
01-15 2549
模态框是bs框架的插件之一，之所以称为插件，是因为它有这自己的一套API，可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件，都支持以下几个共同的属性： data-toggle属性：表示点击或链接时触发的事件。 data-target属性：表示点击或链接时触发的事件后将要被显示或隐藏的目标元素。 data-dismiss：是bootstrap里自定义的属性，给一个元素data-
原生html中modal,js 原生实现的modal弹出框架
weixin_28913879的博客
06-03 494
```模态框实现h4 {margin-left: 20px;}p {text-align: center;}.btn {width: 100px;height: 35px;border-radius: 5px;font-size: 16px;color: white;background-color: cornflowerblue;}.btn:hover,.btn:focus {backgroun...
js向url中添加参数
热门推荐
zuo_hy的专栏
03-17 3万+
function addUrlPara(name, value) { var currentUrl = window.location.href.split('#')[0]; if (/\?/g.test(currentUrl)) { if (/name=[-\w]{4,25}/g.test(currentUrl)) { currentUrl = currentUrl.replace
js替换html代码标签
zuo_hy的专栏
03-18 7633
//体会html标签function escapeHTML(a) { return a.replace(//g, ">").replace(/&/g, "&").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'") }
圆形图片CSS
zuo_hy的专栏
12-19 1774
border-radius: 50%; border: solid 5px #f4f4f4; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.2); box-shadow: 0 0 8px rgba(0,0,0,0.2);
javascript去掉前后空格
zuo_hy的专栏
12-12 1334
function WebForm_TrimString(value) { return value.replace(/^\s+|\s+$/g, '') } \s： space， 空格 +： 一个或多个 ^： 开始，^\s，以空格开始 $： 结束，\s$，以空格结束 |：或者 /g：global， 全局 replace() 替换
几个html常用取尺寸属性
zuo_hy的专栏
08-15 1218
scrollLeft:对象左边界与对象当前可视左边界之间距离 scrollWidth：对象可滚动宽度 scrollTop：对象上边界与对象当前可视上边界距离 scrollHeight：对象可滚动高度 offsetTop:对象距上边界距离 offsetLeft：对象距左边界距离 offsetHeight:相对父容器高度 offsetWidth:相对父容器宽度 clie
用vue框架写一段首页界面
最新发布
08-12
### 回答1： 好的，我可以为您提供一个用Vue框架编写的简单的首页界面代码示例，如下所示： ``` <template> <div> <header> <h1>Welcome to my website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>Featured Product</h2> <div class="product"> <img src="product.jpg" alt="Product"> <h3>Product Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p> <a href="#" class="btn">Learn More</a> </div> </section> <section> <h2>Latest News</h2> <ul class="news"> <li> <a href="#"> <img src="news1.jpg" alt="News"> <h3>News Title 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p> </a> </li> <li> <a href="#"> <img src="news2.jpg" alt="News"> <h3>News Title 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p> </a> </li> <li> <a href="#"> <img src="news3.jpg" alt="News"> <h3>News Title 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p> </a> </li> </ul> </section> </main> <footer> <p>© 2023 My Website. All rights reserved.</p> </footer> </div> </template> <script> export default { name: 'Home', } </script> <style> /* Add your custom styles here */ </style> ``` 此代码示例包含一个顶部导航栏、一个产品推荐区域和一个最新新闻区域，以及页脚。您可以根据自己的需要进行修改和扩展。 ### 回答2： 使用Vue框架编写首页界面可以很简单，下面是一个示例： ```vue <template> <div class="home"> <h1>{{ title }}</h1> <p>{{ description }}</p> <button @click="showModal">点击按钮</button> <modal v-if="showModalFlag" @close="closeModal"></modal> </div> </template> <script> import Modal from './Modal.vue'; export default { name: 'Home', data() { return { title: '欢迎来到首页', description: '这是一个使用Vue框架编写的首页界面', showModalFlag: false, }; }, components: { Modal, }, methods: { showModal() { this.showModalFlag = true; }, closeModal() { this.showModalFlag = false; }, }, }; </script> <style scoped> .home { text-align: center; margin-top: 50px; } </style> ``` 在这个首页界面中，我们使用了Vue的单文件组件的语法，包括了一个模板(template)部分、脚本(script)部分和样式(style)部分。 模板部分定义了一个 `<div>` 标签，其中包含了一个标题(`<h1>`)、描述(`<p>`)和一个点击按钮(`<button>`)。通过`{{ }}`来绑定数据，实现动态更新。 脚本部分定义了一个默认的`data`方法，返回了首页界面需要用到的数据。另外，还定义了两个方法 `showModal` 和`closeModal` 来控制模态框的显示和关闭。 样式部分使用了scoped的方式，限制样式只作用在当前组件。 此外，我们还引入了一个名为`Modal`的组件，并在`components`中进行注册。在点击按钮时，会显示这个模态框组件，通过监听模态框的`close`事件，关闭模态框。 ### 回答3： Vue框架是一种用于构建用户界面的渐进式框架。下面是一个使用Vue框架编写的简单首页界面示例。 ```html <!DOCTYPE html> <html> <head> <title>首页</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ title }}</h1> <div v-for="item in items" :key="item.id"> <h2>{{ item.name }}</h2> <p>{{ item.description }}</p> </div> </div> <script> var app = new Vue({ el: '#app', data: { title: '欢迎来到首页', items: [ { id: 1, name: '商品1', description: '这是商品1的描述' }, { id: 2, name: '商品2', description: '这是商品2的描述' }, { id: 3, name: '商品3', description: '这是商品3的描述' }, ] } }) </script> </body> </html> ``` 以上示例中，我们首先在HTML中引入了Vue框架的脚本，然后使用Vue实例和`el`选项将其绑定到一个具有id为"app"的元素上。在Vue实例中，我们定义了首页的标题和商品列表数据。使用`{{ title }}`将标题渲染到h1标签内，使用`v-for`指令遍历商品列表，并使用`:key`属性设置唯一的key值，然后将商品的名称和描述渲染到相应的h2和p标签内。 这样，当页面加载时，Vue会将数据和模板绑定，自动将数据渲染到对应的HTML元素上，从而呈现出一个具有标题和商品列表的首页界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值