单击按钮时的 HTML 和 CSS 弹出窗口 + 示例代码

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

任务。您需要简单、不复杂的 HTML 弹出窗口模板(弹出窗口、模式窗口)。

解决方案。您可以使用多个示例,包括 HTML 和 CSS 格式以及 JavaScript。

使用 HTML 和 CSS准备一个简单的弹出窗口

总共您需要三个代码块:

  • 模式窗口的 HTML(最初会隐藏);
  • 单击链接时的 HTML 输出,将出现一个弹出窗口;
  • 使模态窗口显示或隐藏的 CSS 样式。
示例:什么是弹出窗口

使用代码 1:XHTML

 

代码#1:制作一个简单的弹出窗口 HTML + CSS

WordPress插件中的准备工作

解决方案 2.我为 WordPress 网站创建了一个简单的弹出窗口插件。它仅包含 3 个文件: .php – 窗口布局;.js – 绑定到触发器;.css – 样式。代码 2 中的示例内容。

实际上,我决定使用 Ajax 在整个文档加载后加载产品卡上的触发按钮的情况下制作一个自定义解决方案。因此,插件实现的弹出表单不起作用——插件脚本已加载,页面上收集了触发器,但我需要的按钮还没有,它们会在用户与产品卡交互时出现。使用自定义解决方案,您可以将事件插入到带有触发器的按钮中onfocus,这将启动将触发器绑定到窗口的功能 – onmouseover="showModal(trigger, idForm)"

PHP

 

代码2.1:popup-custom-qfurs.php

在文件中,popup-custom-qfurs.php我们正确包含脚本和样式。如果您不通过插件执行此操作,则需要将文件和函数的路径替换plugin_dir_url(__FILE__)为主题的函数。

第二步是在网站的页脚中显示弹出窗口的 HTML 布局。可以去掉多余的,或者以此类推添加更多。这里的关键是id弹出窗口容器必须是唯一的,因为 绑定到触发器。

JavaScript

 

代码2.2:Script.js文件
在该文件中,script.js我们激活弹出函数showModal(),其中第一个参数是设置触发器 – 单击时应出现窗口的按钮或元素的类,第二个参数是指定id应打开的表单。
CSS

 

代码2.3:样式文件style.css
温馨提示:本文最后更新于2024-06-06 18:09:16,某些文章具有时效性,若有错误或已失效,请在下方留言
©版权声明
感谢您的阅读
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容