模态框的使用

标签：mic   ext   label   mis   stripe   title   art   itil   soft   

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>

模态框的使用

标签：mic   ext   label   mis   stripe   title   art   itil   soft   

原文地址：http://www.cnblogs.com/walksnow/p/6718055.html