Jquery 模态对话框 数据传递问题

昨天在用bootstrap 和 jquery 做网页的模态对话框时, 可以通过按钮的设置传递参数到模态对话框.

效果可参考链接: http://v3.bootcss.com/javascript/#modals-related-target 

上面的例子中 嵌入了 jquery.min.js  和 docs.min.js 两个js文件 , 传递参数的js函数是在doc中实现的

如果要做自己的form表单传递很多参数 则需要修改js 函数.

具体步骤如下:

1. button 参数

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AddColorInfo" data-whatever='1000'>新增颜色</button>

2. 模态对话框

<div class="modal fade" id="AddColorInfo" tabindex="-1" role="dialog"    aria-labelledby="AddColorInfoLabel" aria-hidden="false">    <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="AddColorInfoLabel">                添加颜色信息             </h4>          </div>          <div class="modal-body">                        <form class="form-horizontal" role="form">                <div class="form-group">                   <label for="colorName" class="col-sm-4 control-label">颜色名称</label>                   <div class="col-sm-4">                   <input type="text" class=" form-control" id="colorName" placeholder="颜色名称">                   </div>                </div>                               <div class="form-group">                   <div class="col-sm-offset-4 col-sm-8">                      <button type="submit" class="btn btn-default">确定</button>                   </div>                </div>             </form>          </div>

 

3. js函数

<script type="text/javascript">         $('#AddColorInfo').on('show.bs.modal', function (event) {           var button = $(event.relatedTarget) // Button that triggered the modal           var recipient = button.data('whatever') // 从button 的 data-* 属性获取参数值           var modal = $(this)           // modal.find('.modal-title').text('New message to ' + recipient)           // modal.find('.modal-body input').val(recipient)           modal.find('#colorName').val(recipient) //  找到 colorName 并赋值         })     </script>

 

这里需要注意的是 js函数必须 放在 jquery.min.js 引入之后, 否则不能实现参数的传递效果.

 

之前查了一下 似乎还有更简单的方式 , 但是还没有搞清楚怎么用

转载于:https://www.cnblogs.com/wujbclzw/p/5481388.html