zoukankan      html  css  js  c++  java
  • 模态框的使用

    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=" 280px;" class="form-control" />
    </div>
    </div>
    <div class="text-center">
    <button type="submit" class="btn btn-primary btn-lg" style=" 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=" 280px;" class="form-control" />
    </div>
    </div>
    <div class="text-center">
    <button type="submit" class="btn btn-primary btn-lg" style=" 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>

  • 相关阅读:
    HDOJ_ACM_超级楼梯
    HDOJ_ACM_下沙的沙子有几粒?
    杭电_ACM_How Many Trees
    HDOJ_ACM_Tiling_easy version
    HDOJ_ACM_母牛的故事
    HDOJ_ACM_小兔的棋盘
    HDOJ_ACM_一只小蜜蜂
    杭电_ACM_Count the Trees
    HDOJ_ACM_折线分割平面
    Sun Solaris下JAVA以及JSP开发环境的配制小记
  • 原文地址:https://www.cnblogs.com/walksnow/p/6718055.html
Copyright © 2011-2022 走看看