作为html学习学习模态框需要二步:

效果图

第一步学习HTML中 div的弹出

①触发按钮
        <input class="btn btn-success" id="addType" value="增加" type="button" />

②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">&times;</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中模态框(弹出框)使用入门的更多相关文章

  1. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  2. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  3. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  4. js中三种弹出框

    javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码 ...

  5. 蜗牛爱课 - iOS7、8模态半透明弹出框

    //源Controller中跳转方法实现 MKDialogController *controller = [[MKDialogController alloc] init]; controller. ...

  6. IOS中position:fixed弹出框中的input出现光标错位的问题

    解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...

  7. WebDriver测试web中遇到的弹出框或不确定的页面

    我自己是用try catch解决的,不知道其他人的解决方法?如有,可以留言

  8. updatepanel中使用alert弹出框方法

    原文发布时间为:2009-05-17 -- 来源于本人的百度文章 [由搬家工具导入]         ScriptManager.RegisterStartupScript(this.UpdatePa ...

  9. js中的alert弹出框文字乱码解决方案

    使用如下代码即可: echo '<html>'; echo '<head><meta http-equiv="Content-Type" conten ...

  10. ⒁bootstrap组件 工具提示框 弹出框 警告框 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux下的应用程序性能分析 总结

    Linux下的应用程序性能分析,根据内核程序和应用程序的不同,下文分两类进行描述. 我们侧重的是应用级别的程序,推荐google perf tool/kcachegrind组合 一.和内核有关的工具 ...

  2. Swift-Switch穿透

    switch vegetable {        case "celery":            print("Add some raisins and make ...

  3. 【代码笔记】iOS-仿安卓,本页出现多个选择项

    一,效果图. 二,代码. //点击任何处,弹出提示选项 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ UIAlert ...

  4. js 事件处理程序 事件对象

    事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...

  5. 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 ...

  6. #winhec# 开发人员刷屏看点 (视频)

    今天大家已经被winhec刷屏了,本来不想写这篇了,但看了所有的文章,大家关注的都是windows 10的那些新功能,小米win10刷机,联想千元手机,小娜啥的.对于keynote上第二部分 Don ...

  7. 微信网站设置右上角发送、分享的内容——.net版本

    一.首先了解本文要解决的问题: 公司前一段开发了移动网站,老板喜欢通过微信看,然后把看到的东西通过右上角的按钮分享出来,但老板发现分享出来的东西,没有指定的图片,没有描述:所以我就得老老实实干活了.. ...

  8. Oracle 常用SQL技巧(转)

    1. SELECT子句中避免使用 “*”当你想在SELECT子句中列出所有的COLUMN时,使用动态SQL列引用 ‘*’ 是一个方便的方法.不幸的是,这是一个非常低效的方法. 实际上,ORACLE在解 ...

  9. Hadoop HDFS Basic JAVA API

      org.apache.hadoop.fs.FileSystem 是HDFS的文件系统抽象,在分布式系统中管理HDFS文件和目录.文件内容存储在由多个相同大小的块(如64M)构成的datanode节 ...

  10. spring多数据源的处理 mybatis实现跨库查询

    实现Myibatis动态sql跨数据库的处理 Spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不 同于常见 ...