bootstrap中modal弹出框的使用

modal按钮位置安放:

<button class="btn btn-primary" onclick="edit()" data-toggle="modal" data-target="#myModal">
    <i class="glyphicon glyphicon-edit"></i> 编辑
</button>

modal框内容设置(表单提交):

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 60%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">系统配置</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form id="form" class="form-horizontal col-lg-offset-1 col-lg-10" roe="form">
                        <div class="form-group">
                            <label class="control-label col-md-3">属性1:</label>
                            <div class="col-md-9">
                                <input class="form-control" type="text"required="required"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">属性2:</label>
                            <div class="col-md-9">
                                <input class="form-control" type="text"required="required"/>
                            </div/>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">是否激活:</label>
                            <div class="col-md-9">
                                <input type="radio" name="isValid" id="radioyes" value="1" checked style="margin-top:2%"/>是
                   <input type="radio" name="isValid" id="radiono" value="0"/>否
                 </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="editbtn" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
时间: 2024-08-07 08:37:58

bootstrap中modal弹出框的使用的相关文章

[Bootstrap]modal弹出框

写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模式弹出框</title> <meta name="viewport" content=&

Bootstrap篇:弹出框和提示框效果以及代码展示

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

BootStrapJS——modal弹出框

学习参考视频https://ninghao.net/video/1615 1.对话框 - Modal 需要bootstrap的CSS文件引入,以及jQuery的js包 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>弹窗测试</title> 6 <link rel="s

安卓中的弹出框

AlertDialog.Builder builder = new Builder(Context context) 得到一个context所在页面的弹出框, 可以是单选 builder.setSingleChoiceItems(items, checkedItem,listener)  items为弹出框的条目,checkedItem为默认选择的条目(一个),listener为弹出框的点击事件监听器(DialogInterface.OnClickListener的类型,是内部类), 也可以是多

selenium python (十一)alert/confirm/prompt的处理(js中的弹出框)

webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept/dismiss/send_keys进行操作 ①text:返回alert/confirm/prompt中的文字信息 ②accept:点击确认按钮 ③dismiss:点击取消按钮 ④send_keys:输入值,这个alert/confirm/prompt没有对话框就不能使用,否则会报错 eg:百度的设

iframe中嵌入弹出框问题

但我们在开发项目中,有时候会遇到奇怪的问题,我们比如用iframe开发项目,嵌入模态框的时候,会发现模态框占不满屏,始终在一个区域,解决方案 1>我们要找到iframe的父级,然后从父级入手 找到主入口页面,把要调用的模态框写在主文件中,然后在当前的页面中调用,window.parent.$('#myModal').modal('show');

JSP中添加弹出框

%> <script language="javascript" type="text/javascript"> alert("密码不能为空!!请输入密码!!"); </script> <%

JS中confirm弹出框

1 if(confirm("确定要删除该任务吗?")){ 2 $.post("findTaskById.action",{taskId:taskId},function(data){ 3 if(data.status=='I' || data.status=='V'){ 4 window.location.href = "deleteTask.action?id=" + taskId; 5 } else { 6 alert("抱歉,该任

Layer中的弹出框的关闭弹出层

layer.alert(result, 9, '信息', function () { parent.layer.close(index); });