开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap Modal hide方法需要在PHP表单提交时提交两次才能工作

Bootstrap Modal是一个用于创建模态框的前端框架组件。hide方法是用于隐藏模态框的函数。在PHP表单提交时，如果需要使用hide方法来隐藏模态框，确保它在表单提交之前被调用两次。

这种情况可能是由于表单提交时的异步操作导致的。在第一次表单提交时，可能会触发某些异步操作，导致模态框无法立即隐藏。因此，需要在第一次提交后再次调用hide方法，确保模态框被正确隐藏。

以下是一个示例代码，展示如何在PHP表单提交时使用Bootstrap Modal的hide方法：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Modal Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- 模态框 -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框内容 -->
            <div class="modal-body">
                <h4>提交成功！</h4>
                <p>感谢您的提交。</p>
            </div>
        </div>
    </div>
</div>

<!-- 表单 -->
<form method="post" action="submit.php">
    <input type="text" name="name" placeholder="姓名">
    <input type="email" name="email" placeholder="邮箱">
    <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
    // 表单提交时触发
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 执行异步操作，比如使用Ajax提交表单数据
        // ...

        // 隐藏模态框
        hideModal();
    });

    // 隐藏模态框函数
    function hideModal() {
        var modal = document.getElementById('myModal');
        var bsModal = new bootstrap.Modal(modal); // 创建Bootstrap Modal实例
        bsModal.hide(); // 隐藏模态框
    }
</script>

</body>
</html>

在上述示例中，我们创建了一个简单的模态框和一个表单。在表单提交时，我们使用JavaScript监听submit事件，并阻止表单的默认提交行为。然后，我们执行异步操作（比如使用Ajax提交表单数据），最后调用hideModal函数来隐藏模态框。

需要注意的是，上述示例中使用了Bootstrap 5版本的CDN链接，你可以根据自己的需求选择合适的版本。此外，还需要确保在页面中引入了Bootstrap的CSS和JS文件。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器，适用于各种应用场景。详情请参考腾讯云云服务器。
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的数据。详情请参考腾讯云对象存储。

以上是关于Bootstrap Modal hide方法在PHP表单提交时需要提交两次才能工作的完善且全面的答案。希望对您有帮助！

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

有帮助

没帮助

相关·内容

PHP实现用户登录注册功能

初学php做了一些比较常见且有用的页面，放在上面记录一下咯我是用了bootstrap框架里面的模态框做注册登陆页面，这样页面比较美观页面效果：注册成功条件/功能： 1）用户名不能冲突 2）两次密码必须相同...、密码、验证码都输入正确 toggle();/*修改首页选项菜单*/ $('#loginer').modal('hide');/*关闭模态框...$('#register').modal('hide'); }else if (res==2) { $('#wanner').html('两次密码不一致...php include_once ("connect.php"); $user=$_GET['username'];//获取表单提交的数据 $pwd=$_GET['pwd']; $repwd=$_GET...php include_once ("connect.php"); session_start();/*开启会话*/ $user=$_GET['username'];/*获取登录表单提交过来的数据*/

1.9K2 1

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

1、Bootstrap对话框的使用常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstrap的对话框界面非常友好，当我们使用ESC...打开对话框界面如下所示： //显示可以选择客户 $("#btnSelectCustomer").show(); 关闭对话框界面如下所示: $("#add").modal("hide"); 一般情况下，我们弹出的对话框就是一个表单...，可以执行类似保存数据的提交操作的，因此需要对表单的数据进行验证，如果有错误，我们可能需要在界面上提醒，因此在页面初始化的时候，需要初始化表单的验证规则，下面是我们常规的表单初始化操作。...bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。...我们在提交表单后，通过Ajax响应后台返回结果，并在前台显示返回信息，jNotify能非常优雅的显示操作结果信息。

5.2K5 0

Bootstrap 模态框（Modal）插件的基本应用

如果只是单独引用该插件的功能，只需要引用 modal.js ，也可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。...$('#identifier').modal('hide') 实例：下面的演示方法的用法： <!...1、show.bs.modal 在调用 show 方法后触发。...$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) 3、hide.bs.modal 当调用 hide 实例方法时触发...$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) 4、hidden.bs.modal 当模态框完全对用户隐藏时触发

4.4K0 0

bootstrap switch控件

需要使用Bootstrap switch，实现通过、拒绝功能并且在开关至拒绝时，显示textarea框输入原因。.../js/bootstrap-switch.min.js"> 3、页面（使用modal打开，若须使用需引用对应的js和css）提交...switch开关状态 onSwitchChange : function() { //.prop方法查看input的checked属性，即使查看其开关状态...false、true对应input的checked属性，显示和隐藏输入框 if (checkedOfAll==false){ $('#approve_input').hide

1.8K1 0

bootstrap 模态框弹出框

btn-default" data-dismiss="modal">关闭提交更改...如果您仔细查看上面的代码，您会发现在标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。...class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。...class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。...hide.bs.modal 当调用 hide 实例方法时触发。 hidden.bs.modal 当模态框完全对用户隐藏时触发。使用方法 ?

5K4 0

python测试开发django-183.bootstrap-formvalidation重置校验的方法

前言 form表单提交之前，需先校验数据合法性，当连续提交时，重置了form表单，校验方法也需要跟着重置遇到问题参考前面一篇https://www.cnblogs.com/yoyoketang/p/...15745166.html,重置表单后，表单校验并没有重置 formvalidation校验表单校验器 // 表单校验器 function validate_model_form(id){...message: '最大200位字符' } } } } }) } // 页面初始化需调用校验方法...$(function() { validate_model_form('#add-model-form'); }); 当提交过一次后，form表单初始化了，再次弹出模态框编辑时，校验方法没重置...('hide'); // 重置form $form[0].reset(); //

3283 0

python测试开发django-122.bootstrap模态框(modal)学习

前言模态框（Modal）是覆盖在父窗体上的子窗体，使用场景比如：在页面上编辑内容的时候经常需要弹出一个框框，可以编辑字段提交。...点删除按钮的时候，需要弹出二次确认框，这种现页面上的框框就是模态框模态框(modal) 调用模态框有2种方法：第一种方法：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle...$(‘#identifier’).on(‘shown.bs.modal’, function () {// 执行一些动作…}) hide.bs.modal 当调用 hide 实例方法时触发。...$(‘#identifier’).on(‘hide.bs.modal’, function () { // 执行一些动作…}) hidden.bs.modal 当模态框完全对用户隐藏时触发。...参考菜鸟教程https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

2.2K3 0

【Java 进阶篇】深入了解 Bootstrap 插件

Bootstrap 模态框（Modal）模态框是一个常见的插件，用于在网页上显示对话框、提示框或表单。模态框通常用于显示额外的信息或执行特定的操作，用户需要在模态框上进行交互。...Bootstrap 表单验证表单验证是一个重要的前端功能，用于确保用户在提交表单时提供有效的数据。Bootstrap 提供了一些内置的表单验证类，可以帮助您轻松实现表单验证。...提交：这是提交按钮，用户可以点击它以提交表单。...这个基本的表单验证结构包含了文本输入字段和必填字段。如果用户尝试提交空值，浏览器将显示验证错误消息。自定义表单验证表单验证可以根据不同的需求进行自定义。...dist/js/bootstrap.bundle.min.js"> 这将在项目中加载 Bootstrap 的 JavaScript 文件，以确保插件能够正常工作。

2473 0

利用动态注入HTML的方式来设计复杂页面

btn-primary" /> 13: 14: } 三、显示联系人列表 QueryFormPartial.cshtml定义了一个以Ajax方式提交的表单...tr> 25: } 26: 27: 从QueryFormPartial.cshtml的定义可以看到，表单成功提交之后会调用一个名为...POST的方式提交到HomeController的Action方法Update（@using(Ajax.BeginForm("Update", null, new AjaxOptions { HttpMethod...: contacts.Add(contact); 9: return "OK"; 10: } 11: } 联系人修改表单提交后关闭当前窗口并加载新的数据通过具有如下定义...("hide"); 5: $(".form-search form").submit(); 6: } 7:

3.5K2 0

浅谈 Angular 项目实战

搭建开发环境开发环境的搭建非常简单，使用 Angular CLI 几乎可以完成所有工作，但是在与后端联调接口的时候，还需要做一些自定义配置。...modal-alert.component.html 中的代码是整个组件的 HTML 结构，有两个变量及一个实例方法。..."> 关闭在 modal-alert.component.ts...import { Component, OnInit } from '@angular/core'; import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service...需要特别注意的就是，只有当订阅 Observable 的实例时，它才会开始发布值。订阅时要先调用该实例的 subscribe() 方法，并把一个观察者对象传给它，用来接收通知。

4.6K0 0

网站注册登陆弹框和作者列表

前台登陆弹框前台弹框登陆注册搞定了，其实也是一个一直心心念的功能，刚开始本想着通过Bootstrap的模态框（Modal）来做的，无奈Modal背景遮罩一直有个bug，具体问题可见本站搜索框，而使用Modal...最近看到了一个使用ajax提交的文件感觉挺不错的，于是搬运过来，不过有一个问题还没有解决：登陆和退出后返回到首页，而不是当前页面。待解决！...参考方法：https://www.thinbug.com/q/52791880 界面有点单调，有时间再美化一下。...null, 'optioncount' => false, 'exclude_admin' => true, 'show_fullname' => false, 'hide_empty...php new WP_User_Query($args); 关于此函数的详细情况可以查阅WordPress中wp-includes/user.php文件。

6602 0

【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

通过利用这些方法，可以减少手动编写HTML元素的工作，同时提高代码的可读性和可重用性。...这使得在控制器中处理请求时，可以方便地使用和操作模型数据。工作原理模型绑定工作的基本原理是通过将HTTP请求中的数据（键值对）映射到应用程序中的模型对象。... 元素有以下常见属性： action: 指定表单数据提交到的服务器端URL。 method: 指定用于发送表单数据的HTTP方法，常见的有 “GET” 和 “POST”。... 用于触发表单提交。...return RedirectToAction("Success"); } // 模型验证失败，返回登录页面，并显示错误信息 return View(model); } 模型验证在表单提交时

4392 0

BootStrap应用开发学习入门1

$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) hide.bs.modal 当调用 hide 实例方法时触发。...) +" - 当调用 hide 实例方法时触发。")...shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。...shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.popover 当调用 hide 实例方法时立即触发该事件。...shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。

44.8K2 1

yii2 modal弹窗之ActiveForm ajax表单异步验证

前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题，本以为modal要告一段落可以开始新的话题了，但是实际问题往往超乎想像，这不modal弹窗提交的表单说是怎么验证的问题又出来了...yii2中，ActiveForm默认做了客户端验证，但是表单的提交，却不是无刷新的。也就是常常看到的表单提交后页面会刷新。...如果想要开启无刷新的模式，只需要在ActiveForm开始开启enableAjaxValidation即可，像下面这样 <?...如果你不设置该参数，该地址默认是你当前路由，而又恰巧你当前路由就是表单form的action，你会很好奇的发现，当表单项input失去焦点的时候，你对数据的修改已经提交到后端进行了处理了？...// 看主要的验证操作，该操作是表单字段失去焦点时异步验证，同时如果直接提交表单，也会先执行该操作进行验证 public function actionValidateForm () { Yii

1.5K2 1

php 接口与前端数据交互实现示例代码

; } }); }); }) } 调试方法：数据交互实现3：新增在写php的方法上，我觉得我的方法是有问题的，因为所有的参数，也就是所有的需要新增的数据都是通过接口以？...功能是可以实现，但是如果新增的数据较大，这个方法显示是不可行的，但是还没有找到合适的方法，烦请大侠们指点。 php: 前端实现JS部分： html使用了bootstrap 的 modal作为新增时的弹出框 <!...框 setTimeout(function(){ $('#exampleModal').modal('hide'); },500); 　　　　　　　　　　　　　　//隐藏modal框后重新加载当前页 setTimeout...的方法中，为什么，新增成功后的其它操作要在 error 这个对象中实现？

1.9K2 0

BootStrap应用开发学习入门1

$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) hide.bs.modal 当调用 hide 实例方法时触发。...) +" - 当调用 hide 实例方法时触发。")...shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。...shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.popover 当调用 hide 实例方法时立即触发该事件。...shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。

44.3K3 0

【应用】在线文件管理

写的一个在线文件管理系统，这里是github地址，后台作者已经给出了php和servlet的实现，之所以使用Spring MVC重写后台，主要是为了熟悉一下Spring MVC，同时精简了该管理系统的一些功能...下面主要介绍在更改界面时的遇到的一些问题。...modal demo 提交 <!

1.7K5 0

yii2 modal弹窗之ActiveForm ajax表单异步验证

前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题，本以为modal要告一段落可以开始新的话题了，但是实际问题往往超乎想像，这不modal弹窗提交的表单说是怎么验证的问题又出来了...yii2中，ActiveForm默认做了客户端验证，但是表单的提交，却不是无刷新的。也就是常常看到的表单提交后页面会刷新。...如果想要开启无刷新的模式，只需要在ActiveForm开始开启enableAjaxValidation即可，像下面这样 <?...如果你不设置该参数，该地址默认是你当前路由，而又恰巧你当前路由就是表单form的action，你会很好奇的发现，当表单项input失去焦点的时候，你对数据的修改已经提交到后端进行了处理了？...// 看主要的验证操作，该操作是表单字段失去焦点时异步验证，同时如果直接提交表单，也会先执行该操作进行验证 public function actionValidateForm () { Yii

1.2K1 0

bootstrap3-dialog打开嵌套iframe窗口

bootstrap3-dialog是一款第三方提示框插件，但是使用过程中感觉对打开新的远程页面不太友好，而打开表单嵌套在原页面中又显得代码非常臃肿，所以对bootstrap3-dialog进行二次封装...，id就是dialog的一个标识，title是dialog的标题名字，url为嵌套内的页面地址，height/weight就是高/宽，callback就是dialog关闭时的回调函数，比如新增数据时关闭新增页面调用回调函数刷新列表页...dialog又打开就要关闭，我们不可能只通过x号关闭页面，我们还需要点击关闭，确定这些按钮来关闭页面，这样我们就需要在opener和dialog建立起联系，这里采用的是给页面的message事件注册监听...('hide'); window.parent.postMessage('close', '*'); } 关于dialog的使用还有一个问题，如果在一个iframe中打开窗口，遮罩层和dialog...= this.getModal(); var $backdrop = $modal.data('bs.modal').

4302 0

ExtJs二(实现登录)

6.接着加入表单面板的提交地址，这里定为Account/Login，就是Account控制器的Login方法，代码如下： url: "Account/Login", 7.因为表单内使用的都是文本字段，因而可以统一做一些定义...formBind配置的作用是只有在表单内输入符合要求时才能使用该按钮，这个设计在Ext JS4也是新加入的，很方便，不再需要自己去写代码实现这个了。登录按钮将调用onLogin方法。...，因为表单在实例化后，items属性指向的是MixedCollection实例，因为要在其items内才能找到文本自动对象。 ...接着完成的是onLogin方法，难度也不大，就是先调用isValid方法，验证表单是否符合提交要求，然后调用submit方法提交。...其实不调用isValid也行，因为登录按钮只要在isValid为true时才能用。

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭