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

    1、<a href="JavaScript:void(0);" class="bs-tooltip remark-item" rel="{$bill.id},{$bill.username},{$bill.remark}"><i class="icon-pencil"></i>备注</a>

    2、<!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" 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"> &times; </button><h4 class="modal-title" id="myModalLabel"> 备注 </h4></div>
    <form class="form-horizontal row-border" method="post" role="form" id="remark">
    <input type="hidden" name="id" id="bill_id" value=""/>
    <div class="modal-body">
    <div class="form-group">
    <label class="col-md-2 control-label">客户名称:</label>
    <div class="col-md-10">
    <input type="text" id="user_username" value="" class="form-control input-width-medium" disabled />
    </div>
    </div>
    <div class="form-group">
    <label class="col-md-2 control-label">备注:</label>
    <div class="col-md-10">
    <input type="text" name="remark" id="bill_remark" value="" class="form-control input-width-xlarge" placeholder="备注" />
    </div>
    </div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
    <button type="submit" class="btn btn-primary"> 确定 </button>
    </div>
    </form>
    </div>
    </div>
    </div>

    3、js调用
    $("a.remark-item").click(function (b) {
    var data=$(this).attr('rel');
    var result = data.split(",");
    $("#bill_id").val(result['0']);
    $("#user_username").val(result['1']);
    $("#bill_remark").val(result[2]);
    $("#myModal").modal();
    });
     
  • 相关阅读:
    php_package v2.7发布了 宋正河作品
    svn图文教程-宋正河整理
    ci框架学习整理
    php+mysql 数据库分表分段备份程序--宋正河
    保留mysql数据库中的最新1000条记录
    php 文件上传缩略图路径分析类
    php js css加载合并函数 宋正河整理
    二级域名 cookie session 共享
    图像处理相关概念
    由Python到深度学习入门之Keras、TensorFlow 、PyTorch联系与区别
  • 原文地址:https://www.cnblogs.com/pcx105/p/6638911.html
Copyright © 2011-2022 走看看