开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js提交并弹出div窗口

在JavaScript中，提交表单并弹出一个div窗口通常涉及到表单提交事件的处理以及DOM操作。下面是一个基础的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission with Div Popup</title>
<style>
  /* 样式用于隐藏和显示弹出窗口 */
  #popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  /* 样式用于覆盖背景 */
  #overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
</style>
</head>
<body>

<form id="myForm">
  <input type="text" id="inputText" placeholder="Enter some text">
  <button type="submit">Submit</button>
</form>

<!-- 弹出窗口 -->
<div id="overlay"></div>
<div id="popup">
  <p>Form submitted successfully!</p>
  <button id="closePopup">Close</button>
</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  // 这里可以添加表单数据处理逻辑，例如通过Ajax发送数据到服务器

  // 显示弹出窗口和覆盖层
  document.getElementById('overlay').style.display = 'block';
  document.getElementById('popup').style.display = 'block';
});

document.getElementById('closePopup').addEventListener('click', function() {
  // 隐藏弹出窗口和覆盖层
  document.getElementById('overlay').style.display = 'none';
  document.getElementById('popup').style.display = 'none';
});

解释

HTML部分：定义了一个简单的表单和一个用于弹出窗口的div元素，以及一个用于覆盖整个页面的div元素（作为背景）。
CSS部分：设置了弹出窗口和覆盖层的样式，初始状态下它们都是隐藏的。
JavaScript部分：
- 监听表单的提交事件，阻止其默认提交行为。
- 在表单提交后，显示弹出窗口和覆盖层。
- 监听关闭按钮的点击事件，隐藏弹出窗口和覆盖层。

应用场景

这种类型的交互常用于：

表单提交后的确认信息显示。
用户操作的即时反馈。
轻量级的模态对话框展示。

注意事项

在实际应用中，你可能需要通过Ajax将表单数据发送到服务器，并根据服务器的响应来决定是否显示弹出窗口。
确保弹出窗口的可访问性，例如支持键盘导航和屏幕阅读器。

这样，当用户提交表单时，就会弹出一个div窗口，显示提交成功的消息，用户可以点击关闭按钮来关闭这个窗口。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）

因为最近有人问小轻建站问题，想知道DIV弹窗的做法，给大家测试了下，效果大家可以再做修改。 ? ▲ 效果图以下是弹出窗口代码：点击文字弹出一个...DIV层窗口代码 .black_overlay{ display: none; position...:1002; overflow: auto; } 示例弹出层...div> div id="fade" class="black_overlay">div> 如果你也有什么问题，欢迎给【小轻论坛

14.7K3 0

DIV+JS+CSS实现点击弹出图片效果

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。...的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js代码 ...class="top_contact_us"> div class="top_telphone">div> div class="top_weixin">微信公众号div> div class="top_qq">官方QQ群div> div> div id="light_qq" class="white_content

26.2K3 0

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。... div class="overlay" id="overlay"> div class="popup"> 弹出图层提交 div class="close" id="close-popup">×div> div> div> var openPopupButton = document.getElementById("open-popup"); var closePopupButton...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

7.4K5 0

js实现网页弹出窗口的代码详细教程

【2、经过设置后的弹出窗口】下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。...脚本开始； window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；...【8、内包含的弹出窗口-一个页面两个窗口】上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。...写到这里弹出窗口的制作和应用技巧基本上算是完成了，需要注意的是，js脚本中的的大小写最好前后保持一致。...详细的js实现网页弹出窗口的教程就结束了，用途很广泛，可以利用其实现每日弹窗搜一搜自己的博客增加展现量，如果有人帮你点，那就更好了，量大的话，权重就出来了。对seo的帮助很大。

27.2K5 0

js 控制div 元素随着窗口的变化，保持长宽比例不变

(adsbygoogle = window.adsbygoogle || []).push({});

3.9K2 0

layui弹窗间的传值（layui弹出层传值）(窗口传值)

主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用父窗口的函数从而获取到父窗口的值（相反也是可以的） 1、从主窗口传值到弹出层首先时js...changefileone函数时按钮绑定事件，按钮点击后调用这个函数然后弹出弹出层，加载changefile.html界面然后success提前加载changefile的form数据（从主窗口传值到弹出层...> div> 2、然后再这个弹出层填写数据，按了确定后就开始加载这个js啦，这个获取数据是通过name属性来获取的，上面...row//返回数据行 }); } （3）也可以直接在子窗口的js window.parent.getElementById("text").val(); 如果是(1)(2)种的话子窗口js这样调用...父窗口js： function getrowselect(userdata) { console.log(userdata); document.getElementById

7.4K2 0

如何在Vue.js中创建模态框(弹出框)

Vue.js div> div> div> Script Section js div> div> div> 本段代码义了模板中模态框的结构。...当按钮被点击时，它会切换isOpened变量的值，从而有效地打开或关闭弹出窗口。导入弹出框组件代码导入了一个弹出组件（Popup.vue）。在模板中，使用v-if条件渲染弹出窗口组件。...只有当isOpened变量为true时（v-if="isOpened"），弹出窗口才会显示，表示弹出窗口应该是打开的。用于将弹出窗口组件移动到HTML文档的元素中。...这样可以确保弹出窗口在当前组件的DOM层次结构之外渲染，并且可以显示在页面上的其他内容之上。组件之间的通信：当需要关闭弹出组件时，Popup组件会触发一个关闭事件@close。

8242 0

图形验证码无痕刷新

// 引入jsjs?...script>// 初始化kg.captcha({ // 绑定弹窗按钮 button: "#captchaButton",}); 点击弹出验证窗口...appid=XXX" id="KgCaptcha">// 初始化kg.captcha(); div id="captchaDiv">div>//...appid=XXX" id="KgCaptcha">// 初始化kg.captcha(); div id="captchaDiv">div>//...appid=XXX" id="KgCaptcha">// 初始化kg.captcha(); 点击弹出验证窗口

9612 0

开发Chrome插件获取当前页面Cookie

hl=zh-cn 效果是单机插件按钮，弹出一个端面分析HelloWorld示例四个文件，分别是一个html,一个json，一个js，和一个png格式的图片看来插件开发不需要很多的技术储备，会js就够了...// chrome扩展文件的发行版本，类似vue2 还是vue3的声明 "action": { // 声明 Chrome 应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的...，这个窗口用于调试插件。...id="cookie-list">div> js"> popup.js document.addEventListener...id="toast">div> popup.js document.addEventListener('DOMContentLoaded', function

6261 0

Bootstrap框架实现简易的模态框

简单结构大概是这样：二、代码实现导入jQuery和Bootstrap： js.../bootstrap.min.js"> 1.HTML代码 Bootstrap框架实现简易的模态框 div识别为模态框窗口，fade是可以设置模态框淡入淡出 aria-labelledby的值是模态框的标题 aria-hidden="true"用于保持模态窗口不可见...-- modal-dialog 设置弹出层弹出效果--> div class="modal-dialog"> 窗口 --> <button class="close" data-dismiss="modal" aria-hidden

3042 0

前端|利用模态框（Modal）实现弹窗效果

使用模态窗口的时候，一般会用到某种触发器，常用的是按钮或链接。二、模态框（Modal）简单介绍模态框在bootstrap中是一个插件，所以也可以单独引用插件，但是这就需要引用modal.js。...data-dismiss="modal"，用于关闭模态窗口。class="modal-dialog"是用来设置弹出框居中的。...默认情况下弹出框的宽度比较小，不适合要求，bootstrap中提供了modal-dialog的三个选项，大、默认、小（modal-lg最大，默认中，modal-sm最小）。...class="modal fade" id="mymodal"> div> div> div> 旅游服务是指旅游业服务人员通过各种设施、设备、方法、手段、途径和...div>div> | |:----| [9xa5wxjj5a.png] 图3.1 效果图（3）设置js。

5.8K3 0

Vue模块化开发使用路由

文章目录一、Vue模块化开发使用路由 1、为项目安装vue-router,选择终端->新终端选项，在弹出的终端窗口中输入以下命令安装vue-router。...1、为项目安装vue-router,选择终端->新终端选项，在弹出的终端窗口中输入以下命令安装vue-router。.../router' createApp(App).use(router).mount('#app') 在基于Vue.js的项目开发中，如果要导入一个目录中的index.js文件，可以直接导入该目录，内置的...webpack会自动导入index.js文件。...打开终端窗口，输入npm run serve明林，运行项目。

6681 0

前端html网站页面图片点击放大

当点击缩略图之后，会在一个弹框中显示放大的图片，下面我们实战操作一遍 js...id="outerdiv"> div id="innerdiv" style="position:absolute;"> div>div>js逻辑实现 //点击图片，显示弹窗（放大图片）...获取当前点击的img元素中的src属性 $(bigimg).attr("src", src); //设置#bigimg元素的src属性 /*获取当前点击图片的真实大小，并显示弹出层及大图...outerdiv).fadeIn(500); //淡入显示#outerdiv及img }); $(outerdiv).click(function () { //再次点击淡出消失弹出层

1.8K0 0

前端之bootstrap模态框

Modal简介 Modal实现弹出表单 Modal实现删除提示框其他用法 Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。...如果您想要单独引用该插件的功能，那么您需要引用 modal.js。...或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 div> div> 代码讲解：使用模态窗口，您需要有某种触发器。...div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。

3.5K5 0

支持animate.css动画的jquery弹出层特效

简要教程 jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3，使用非常炫酷和方便。 ?...js/jquery.min.js" type="text/javascript">...js/jquery.popup.js"> HTML结构 div id="myModal" class="myModal">js-popup-close">xdiv> CSS样式 .myModal {max-width...after function onPopupInit: function(){} // popup init after function}); 该支持animate.css动画的jquery弹出层插件的

6.4K5 1

easyUI的常用API

Tooltip 提示框当鼠标移入时弹出的窗体, 在我们原生的HTML中, 也有提示窗,但是仅仅限于超链接 , 并且样式很一般在easyui中, 不依赖与超链接, 任意的组件都可以通过class...:'center',split:true" >5div> div> window窗口 class属性值为 easyui-window 扩展自panel 使用方式基本一致 !...="iconCls:'图标class'" :设置窗口图标 JS方式: $("div选择器").dialog(pra1); pra1: JSON类型的数据键值对如下: 1....width : 窗口宽度, 可忽略px , 默认为px 3. height: 窗口高度. 可忽略px , ......案例 HTML部分: 右键点击网页的任意部分, 弹出菜单 div id="xdl_menu" class="easyui-menu" style="width:120px

2.5K3 0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body...clientWidth = width – border clientHeight = height – border offsetWidth = width offsetHeight = height (需要提一下...div> div> var p = document.getElementByIdx_x(“p”); p.scrollTop...clientWidth = width – border clientHeight = height – border offsetWidth = width offsetHeight = height (需要提一下...，先弹出b相对于a的位置，再弹出a相对于窗口的位置发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163066.html原文链接：https://javaforall.cn

7.5K2 0

EasyUI使用笔记——Datagrid的高级用法（1）

其中添加，只需要弹出新窗口就可以了，而修改和删除，需要取到选中项的内容。...下面是用法： 1.添加营业部：先添加一段html代码，用于显示模态窗口，window这部分的用法大家可以查下easyui的相关demo div id="openwindow_add" class="...> 之后js代码： //生成iframe function createFrame(url) { var s = ''; return s; } //弹出窗口 $('#btn_add'...2.修改营业部同上，先添加一段html代码用于模拟窗口，当然也可以与添加共用一个，下面是js部分： $('#btn_edit').click(function () { var row =

9912 0

探索 JQuery EasyUI：构建简单易用的前端页面

3.3 Window 窗口组件Window 窗口组件可以在网页中弹出一个独立的窗口，用于显示额外的信息、执行特定的操作或者与用户进行交互。...width：设置窗口的宽度。height：设置窗口的高度。left：设置窗口的水平位置。top：设置窗口的垂直位置。resizable：设置窗口是否可调整大小。...-- 创建一个窗口 --> div id="myWindow" class="easyui-window" title="Hello Window" style="width:300px;height...我们还设置了一个工具栏，包含一个添加按钮，点击按钮时会弹出一个提示框显示 "Add button clicked"。...我们还设置了显示复选框，并且当节点被选中时弹出一个提示框显示被选中节点的文本内容。

5821 0

EXT事件

this,{delay:2000}); }); 在调用addListener的时候传递指定的delay为2000，因此当用户点击按钮的时候，不会马上执行事件响应函数，而是在2000毫秒，也就是两秒后才会弹出提示信息框...事件弹出窗口 Getting Started Example js..."> js"> div> 窗口" /> ?

9103 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭