资讯专栏INFORMATION COLUMN

Bootstrap使用模态框modal实现表单提交弹出框

wind3110991 / 3393人阅读

摘要:模态框插件模态框是覆盖在父窗体上的子窗体。通常,目的是显示来自一个多带带的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

Bootstrap 模态框(Modal)插件

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个多带带的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要多带带引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框(Modal)插件的隐藏内容:
通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$("#identifier").modal(options)

实例一、简单弹框

一个静态的模态窗口实例,如下面的实例所示:




     
    Bootstrap 实例 - 模态框(Modal)插件
    
    
    



创建模态框(Modal)

实例二、表单弹窗实现增删改功能

点击添加按钮,弹出添加表单框:

前端页面
user_list.html




    
    用户列表
    
    
    
    



用户列表

用户ID: 合计条件用户:
  默认
总数({total_count}
用户id 用户名 地址 备注 操作
{user_id} {name} {address} {remark}   
{page_str}       

后台php页面action/user_action.php

 0 ? 1 : 0;


相关文章:
bootstrap中的模态框(modal,弹出层)
链接描述

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54388.html

相关文章

  • Yii2.0 模态弹出+ajax提交表单2

    摘要:上一章介绍了模态框的的添加弹出和验证,本章对上一章做个补充。代码如下按钮效果图模态框代码然后我们修改控制器中的方法,把改为模态框效果图表单添加提交表单代码验证代码验证规则效果如下这样就实现了提交表单。 上一章 https://segmentfault.com/a/11... 介绍了模态框的的添加 弹出和models验证,本章对上一章做个补充。代码如下: 按钮效果...

    nanchen2251 评论0 收藏0
  • Yii2.0 模态弹出+ajax提交表单2

    摘要:上一章介绍了模态框的的添加弹出和验证,本章对上一章做个补充。代码如下按钮效果图模态框代码然后我们修改控制器中的方法,把改为模态框效果图表单添加提交表单代码验证代码验证规则效果如下这样就实现了提交表单。 上一章 https://segmentfault.com/a/11... 介绍了模态框的的添加 弹出和models验证,本章对上一章做个补充。代码如下: 按钮效果...

    sumory 评论0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...

    netmou 评论0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...

    Hydrogen 评论0 收藏0

发表评论

0条评论

wind3110991

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<