文档章节

boostrap 模态框

赵作文
 赵作文
发布于 2015/09/28 17:21
字数 268
阅读 105
收藏 0

1:html代码:

      

 <button type="button" class="btn btn-default btn-xs big-btn" id="btnAddGoods" onclick="addGoods()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
</button>
  
<div class="modal fade" id="addpic" tabindex="-1" role="dialog" aria-labelledby="myAddpicModal">
<div class="modal-dialog" role="document">
<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 id="formAddpic" method="post" class="form-horizontal" action="${pageContext.request.contextPath}/activity/addpic.shtml">
<div class="form-group">
<label for="picName" class="col-lg-3 control-label">姓名:</label>
<div class="col-lg-5">
<input type="text" class="form-control" id="picName" name="picName" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="picDepartment" class="col-lg-3 control-label">部门:</label>
<div class="col-lg-5">
<input type="text" class="form-control" id="picDepartment" name="picDepartment" placeholder="部门">
</div>
</div>
<div class="form-group">
<label for="picPhone" class="col-lg-3 control-label">手机:</label>
<div class="col-lg-5">
<input type="text" class="form-control" maxLength="11" id="picPhone" name="picPhone" placeholder="手机">
</div>
</div>
<div class="form-group">
<label for="picEmail" class="col-lg-3 control-label">邮箱:</label>
<div class="col-lg-5">
<input type="email" class="form-control" id="picEmail" name="picEmail" placeholder="邮箱">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="setpicbtn" class="btn btn-primary">确认</button>
<button type="button" onclick="$('#addpic').modal('hide');" class="btn btn-info">取消</button>
</div>
</div>
</div>


2:js代码

    

function addGoods(){
    var $modal = $("#addpic");
    $modal.modal("show");
}
</script>


© 著作权归作者所有

赵作文
粉丝 1
博文 23
码字总数 5827
作品 0
上海
后端工程师
私信 提问
bDialog —— 可多层嵌套、高定制化的模态窗口

bDialog 是基于 Boostrap Modal 开发的可多层嵌套、定制灵活的模态窗口。拥有灵活的窗口元素定制和丰富的回调函数,可在同一页面下展示各种不同样式、风格的窗口皮肤。

王练
2017/06/21
85
0
4.17、Bootstrap V4自学之路-----组件---模态框

由于HTML5定义了它的语义, HTML 属性在Bootstrap模态框中产生不了影响。为了实现同样的效果,使用一些自定义JavaScript: $('#myModal').on('shown.bs.modal', function () { $('#myInput')......

Asktao
2016/03/25
140
0
如何使用模态框

Bootstrap Modals(模态框)是使用定制的Jquery插件创建的,用来创建模态窗口丰富用户体验。页面中的模态框一般分为注册模态框、变更模态框、删除(信息提示)模态框三种基本模态框。以注册模态...

0了凡0
2016/05/12
200
0
bootstrap模态弹出框

模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js。 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码: ☑ LE...

老胡不胖
2015/11/23
2.1K
0
可多层嵌套、高定制化的模态窗口--bDialog

可多层嵌套、高定制化的模态窗口bDialog 基于Boostrap Modal功能进行增加、扩展的可多层嵌套、定制灵活的模态窗口 效果预览 模态窗口效果图: 消息对话框模式效果图: 遮罩模式效果图: 边角...

TerryZ
2017/06/21
3.9K
7

没有更多内容

加载失败,请刷新页面

加载更多

总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
47分钟前
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
50分钟前
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部