bootstrap 弹出框 另类运用
下面是我在做一个简单登录页面时,应用boostrap弹出框,通过调节做成警示框的过程,前后经过了一番波折。因为摸索过程十分有趣,最后也是成功的,使用弹出框做除了警示框的效果,下面我们来看一下吧。
首先是下面这个页面,我想做的是基本的一个表单的验证,在用户没有输入用户名或密码,抑或是用户名,密码错误的时候,给出响应的信息。我们来一步步看一下:

那么好的,我们来看看完成之后达到的效果。


根据不同的情况,做了两个验证: 1 . 前台用户名、密码未输入或不符合规范时,给出响应提示 。 2. 通过请求太数据,在用户名密码不正确是,提示响应信息。
由于本身bootstrap提供 的警示框有点那看,自己又比较喜欢这款弹出框,如实就有了一下的探究过程。
1 首先我查看了boostrap的弹出框的文档,进行了对应的初始化,
② 打开所有弹出框功能,
②开启当前的按钮弹出功能
问题一:在我设置了参数 content:''之后 ,弹出框默认显示都是空,所以弹出框的默认机制,应该就是,初始化时设置了值,在点击按钮弹出,这样一种效果。
于是乎,我想到了解决办法的第一条思路。在每次用户名校验之后,都进行一个重新开启弹出框功能,并初始化参数设置。
事实证明,我的想法是有多么幼稚。 弹出框的运行机制竟然是,在初始化之后,每次点击弹出都重新出现一个'对象实例'。因为我的预期不仅没有达到,我还在代码里面
看到了这个。
因为每一次的popover后面带有的数字都是不一样的。我猜测,每一次点击按钮的弹出框都类似于一个新的实例对象。
如果是这样,我将面临一个很严重的问题,那就是,我无法对已经进行初始化试着之后的弹出框改变其中的内容。于是改变思路,内容的显示必然依托对html中元素,属性或者
样式的变化。然后我审查了元素,发现了这个: data-content 内容与我初始化传入参数content显示的内容一致。只要我能改变data-content的值,不就能改变弹框的显示了吧。
于是乎,我兴高采烈的对button注册点了点击事件,进行了DOM操作,在每次校验失败时,将data-content的内容,显示为提示信息。好吧,问题二出现了。
问题二: 一个严重的问题,这个boostrap 弹出框在改变data-content之后确实能够起到一定的作用,但是,但是,但是!
点击按钮的时候我就喜欢弹出相应的提示,它给我的反馈却是,点击改变data-content,再下一次点击的时候时候才会响应的效果!我的天哪,坑爹呢!
接下来,无可奈何的我只能把对data-content的更改提前设置在了,表单失去焦点时的判断:
这次在输入完用户名,密码之后,终于能够正常的改变data-conten的值了。只要我点击这个按钮
我期待已久的弹框就出来了,但是!又双叒出问题了!如果用户直接输入完密码之后,单击button,data-content内容竟然没有来的及改变,就提示了上一次
的提示内容。也就是说,这个坑爹失去焦点事件,我需要用户输入完成之后,使用点击空白,再来点击button才能实现预期效果!
就在我万念俱灰的时候,我看到了这个:
好嘛!竟然支持html,那样的话,我操作我传入的div,添加一个表示id='content'(以下简称#content)
通过控制div中的
内容显示,不就能够在不适用表单失去交单的情况下,进行,相关内容的显示了么。
在用户名,不存在我,我设置div的innerText='请输入用户名',在密码不存在的时候,我设置div的innerText为‘请输入密码’。然后,每次点击之后,第一时间
置空,#content中的内容。不就可以完美的实现效果了么。理想很丰满,现实很骨感。又双叒叕出问题了。
问题三:在我置空内容之后,弹出框给我显示了这个
说实话,我很尴尬。
好嘛好嘛,我直接隐藏#content总行了吧。发现效果还是这样。那我隐藏父级也给你隐藏了吧,肯定是盒子包裹着的!然后
矩形部分小时了
三角竟然还在。一怒之下,我连#content的$("#content").parent().hide().siblings().hide 父级,父级的兄弟级也隐藏了。
万万没想到,竟然还有一个羞耻的小点。一个非常明显的空心圆点。跟一个句号一样,黏着在我的按钮旁边。这显然不行啊。
最后的最后,我把button的下一个兄弟隐藏了。$("#button").next().hide() OK!
将ajax返回的错误信息,也渲染到div的innerText中,终于是完成了我这个幼稚的抽风想法!!!有点乱。将就着记录一下,看看还有那些奇葩的想法,以后
也能多思考,多实现把!其实研究这些,框架的外在表现形式,来探索内在可能的原理,已经方式,感觉还是很有意思的。
bootstrap 弹出框 另类运用的更多相关文章
- Bootstrap弹出框(modal)垂直居中
最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- bootstrap弹出框
要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- bootstrap弹出框提示框无法调用
使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...
- Bootstrap 弹出框和警告框插件
一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...
- bootstrap 弹出框(Popover)插件 修改title等属性选项值
<button type="button" class="btn btn-default ht-btn" data-toggle="popove ...
- bootstrap弹出框居中
1.html页面(如果效果出不来,注意修改单引号) <!DOCTYPE html> <html lang="zh-CN"> <head> < ...
随机推荐
- JVM内存区域(运行时数据区)划分
前言: 我们每天都在编写Java代码,编译,执行.很多人已经知道Java源代码文件(.java后缀)会被Java编译器编译为字节码文件(.class后缀),然后由JVM中的类加载器加载各个类的字节码文 ...
- spring-security 理解 笔记 介绍以及使用(持续更新)
本人经过2周的学习,成功搭建了认证服务器,资源服务器和客户端 .下面是本人对 oauth2的理解,以及spring-security的使用,如果理解错误的地方,还望指正. 现在代码有点凌乱,过段时间会 ...
- 框架-弹出选择框(Jquery传递Json数组)
给一个button按钮,执行方法 Json传值$("body").on("click", "#btnsure", function() { ...
- win7电脑定时开机设置方法
在BIOS设置主界面中选择“Power Management Setup”,进入“电源管理”窗口. 注:缺省情况下,“Resume By Alarm”定时开机选项是关闭的. 将鼠标移到“Resume ...
- DacningLinks实现
本文简单分析DancingLinks实现中的数据结构设计,给出了精确覆盖问题及其扩展问题的代码.并应用于数独问题. 先简单描写叙述一下精确覆盖问题: 给定一个N*M的01矩阵,从中选中若干行,这些行向 ...
- BZOJ 1005 明明的烦恼 Prufer序列+组合数学+高精度
题目大意:给定一棵n个节点的树的节点的度数.当中一些度数无限制,求能够生成多少种树 Prufer序列 把一棵树进行下面操作: 1.找到编号最小的叶节点.删除这个节点,然后与这个叶节点相连的点计入序列 ...
- ubuntu下安装pycharm的方法
linux下安装pycharm是比较麻烦的. 安装pycharm之前要安装好JDK8,依次执行如下的命令: sudo add-apt-repository ppa:webupd8team/java s ...
- ABP框架 - 介绍 VS2017调试器无法附加到IIS进程(w3wp.exe) c# 动态实例化一个泛型类
ABP框架 - 介绍 在14,15年间带领几个不同的团队,交付了几个项目,在这个过程中,虽然几个项目的业务不一样,但是很多应用程序架构基础性的功能却是大同小异,例如认证.授权.请求验证.异常处理. ...
- ubuntu 安装后要做的事情
1. 安装chrome,软件中心就可以. 2. 安装vim 和一些插件.这里引入一大牛配置的插件集 sudo apt-get install vim-gtk wget -qO- https://raw ...
- 分享:APK高级保护方法解析(三)
刷朋友圈.玩游戏.看新闻,智能手机正在以我们无法想象的速度飞快发展,可是随之而来的安全问题也越来越引人关注,APP二次打包.反编译.盗版的现象屡见不鲜.因此须要对APK进行加固保护. 眼下市面上常见的 ...