Html中模态框(弹出框)使用入门
作为html学习学习模态框需要二步:
效果图
第一步学习HTML中 div的弹出
②HTML代码
#typeView,#musicView{ display:none; border:1em solid #3366ff; height:auto; width:%; left:%; top:%; position:absolute; <!-- --> z-index:; <!-- 层级优先级--> background:white; } <div id="typeView"> <label class="quit glyphicon glyphicon-off ">取消</label> <form id="f_type" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>类型名字</label> <input type="text" name="T_Name" id="T_Name" class="form-control" /> <input type="/> </div> <div class="form-group"> <label>备注</label> <textarea name="T_Remark" id="edit" class="form-control"></textarea> </div> <div class="form-group"> <input type="button" class="form-control btn btn-success" id="bt_addType" value="增加" /> </div> </form> </div>
③触发JQ事件
$("#addType").click(function () { var edit = new wangEditor('edit').create(); $("#typeView").show(); })
第二步学习BOOTStrap3中的模态框
效果图:
1.创建模态框
<div class="modal fade" id="adminView" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">用户管理</h4> </div> <div class="modal-body"> <form action="/api/admin/" class="" method="post" id="Form_AdminView" type=""> <input type="hidden" id="Adm_Id" name="Adm_Id" /> <div class="form-group"> <label>名字</label> <input type="text" class="form-control" name="Adm_Name" id="Adm_Name" /> </div> <div class="form-group"> <label>账号</label> <input type="text" name="Adm_Card" class="form-control" id="Adm_Card" /> </div> <div class="form-group"> <label>密码</label> <input type="text" name="Adm_Pwd" class="form-control" id="Adm_Pwd" /> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="Btn_AdminView">修改</button> </div> </div> </div> </div>
2.调用使用模态框
$("#btn_AddAdmin").click(function () { //操作类型 $("#Form_AdminView").attr("type", "add"); //重置输入框内的值 $("#Form_AdminView").find("input").val(""); //显示模态框 $("#adminView").modal("show"); }); <!-- 隐藏 $("#adminView").modal("hide") -- >
试用版模态框的时候出现的问题:
1.模态框用来编辑或增加,如果add/edit用同一个个模态框,就会存在上一次的值保留的问题 b
解决:$("form > input").val("") =》form表单清空
2016.5.12
问题2:用B3模态框存在编辑器变性,看怎么解决
Html中模态框(弹出框)使用入门的更多相关文章
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- js中三种弹出框
javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...
- 蜗牛爱课 - iOS7、8模态半透明弹出框
//源Controller中跳转方法实现 MKDialogController *controller = [[MKDialogController alloc] init]; controller. ...
- IOS中position:fixed弹出框中的input出现光标错位的问题
解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...
- WebDriver测试web中遇到的弹出框或不确定的页面
我自己是用try catch解决的,不知道其他人的解决方法?如有,可以留言
- updatepanel中使用alert弹出框方法
原文发布时间为:2009-05-17 -- 来源于本人的百度文章 [由搬家工具导入] ScriptManager.RegisterStartupScript(this.UpdatePa ...
- js中的alert弹出框文字乱码解决方案
使用如下代码即可: echo '<html>'; echo '<head><meta http-equiv="Content-Type" conten ...
- ⒁bootstrap组件 工具提示框 弹出框 警告框 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Linux下的应用程序性能分析 总结
Linux下的应用程序性能分析,根据内核程序和应用程序的不同,下文分两类进行描述. 我们侧重的是应用级别的程序,推荐google perf tool/kcachegrind组合 一.和内核有关的工具 ...
- Swift-Switch穿透
switch vegetable { case "celery": print("Add some raisins and make ...
- 【代码笔记】iOS-仿安卓,本页出现多个选择项
一,效果图. 二,代码. //点击任何处,弹出提示选项 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ UIAlert ...
- js 事件处理程序 事件对象
事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...
- Java 往年试卷参考答案!!!
仅供参考: 第一题: E C E A D D C A C A C A B A B C C D B C 第二题: True True False 11 12 13 14 No such file fou ...
- #winhec# 开发人员刷屏看点 (视频)
今天大家已经被winhec刷屏了,本来不想写这篇了,但看了所有的文章,大家关注的都是windows 10的那些新功能,小米win10刷机,联想千元手机,小娜啥的.对于keynote上第二部分 Don ...
- 微信网站设置右上角发送、分享的内容——.net版本
一.首先了解本文要解决的问题: 公司前一段开发了移动网站,老板喜欢通过微信看,然后把看到的东西通过右上角的按钮分享出来,但老板发现分享出来的东西,没有指定的图片,没有描述:所以我就得老老实实干活了.. ...
- Oracle 常用SQL技巧(转)
1. SELECT子句中避免使用 “*”当你想在SELECT子句中列出所有的COLUMN时,使用动态SQL列引用 ‘*’ 是一个方便的方法.不幸的是,这是一个非常低效的方法. 实际上,ORACLE在解 ...
- Hadoop HDFS Basic JAVA API
org.apache.hadoop.fs.FileSystem 是HDFS的文件系统抽象,在分布式系统中管理HDFS文件和目录.文件内容存储在由多个相同大小的块(如64M)构成的datanode节 ...
- spring多数据源的处理 mybatis实现跨库查询
实现Myibatis动态sql跨数据库的处理 Spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不 同于常见 ...