模态框的使用

1.文档:http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html

2.添加、修改:

<div class="row">
<!--添加信息start-->
<button style="float: right" class="btn btn-primary" data-toggle="modal" data-target="#titile_Modal">添加信息</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="titile_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
       </button>
<h4 class="modal-title" id="myModalLabel">添加信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" class="form-horizontal" action="{:url(‘index/index/contro_add‘)}" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" name="Name" style="width: 280px;" class="form-control" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg" style="width: 120px;">提交</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.模态框(Modal) -->
</div>
<!--添加信息end-->
<div class="table-default">
<table id="sample-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
{foreach $info as $vo}
<tr>
<td>
<!--<a class="btn btn-sm btn-success" onclick="modify_info(‘{$vo.id}‘)">修改</a>-->
<!--<a class="btn btn-sm btn-danger" onclick="ask_del(‘{$vo.id}‘)">删除</a>-->
<!--信息修改start-->
<button data-toggle="modal" class="btn btn-sm btn-success" data-target="#titile_Modal{$vo.id}">修改</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="titile_Modal{$vo.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel{$vo.id}">修改信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" class="form-horizontal" action="{:url(‘index/index/contro_modify‘)}" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="hidden" name="id" value="{$vo.id}" />
<input type="text" name="Name" value="{$vo.Name}" style="width: 280px;" class="form-control" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg" style="width: 120px;">提交</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.模态框(Modal) -->

</div>
<!--信息修改end-->
<a class="btn btn-sm btn-danger" onclick="ask_del(‘{$vo.id}‘)">删除</a>
</td>
</tr>
{/foreach}

  </tbody>
  </table>
  </div>
</div>

时间: 2024-10-01 23:49:17

模态框的使用的相关文章

iframe中的模态框遮罩父窗口原理

关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就行 如果弹出模态框的使用场景没有嵌套在iframe或frame中掌握以上两点加上点css功底就可以写出漂亮的模态框了 特殊场景会涉及到跨域问题,可以在父页面和子页面分别设置<script type="text/javascript">document.domain="

bootstarp 模态框大小尺寸的控制

默认: <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog">

jQuery点击弹出层,弹出模态框,点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla

关于bootstrap 在MVC里 模态框里加载iframe页面做编辑的时候

前台代码 <div class="modal fade" id="myModal" tabindex="-1" role="dialog"     aria-labelledby="myModalLabel" aria-hidden="true" >    <div class="modal-dialog" style="width:830

bootstrap模态框使用

需要引入的相关内容点击下载 <html><%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %><head> <title>BootStrap</title> <link rel="stylesheet" href="bootstrap.min.css"> <scr

Bootstrap 模态框实例插件

好久没有发过自己的代码的状态了,今天编写代码感觉有力不从心了.不过慢慢的找回了感觉,正好朋友问了我一个问题,就是如何实现模态框.其实就是引用bootstrap插件来实现. Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件).页面中的模态框一般分为注册模态框.变更模态框.删除(信息提示)模态框三种基本模态框.

用JS实现加载页面前弹出模态框

主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(function () { $("#select").bind("change",function(){ if($(this).val()==0){ return; } else{ $("p").text($(this).val()); } }); }); //选择触发事件 func

BootStrap 模态框禁用空白处点击关闭

模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处..... $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不关闭. 上述代码用以打开模态框

【AmazeUI】在模态框中嵌入表单,形成模态输入框

在<[AmazeUI]模态框>(点击打开链接)一文中,已经介绍过在AmazeUI这个手机版前端框架中,怎么使用模态框了,但是这篇文章提到的模态框只是那些单纯的模态框.如果要实现一个有表单,同时又有"提交"与"关闭"的按钮,要做出如下的效果,哪应该怎么实现呢? 首先同样是HTML布局: <!--使用HTML5开发--> <!doctype html> <html class="no-js"> <