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 引入之后, 否则不能实现参数的传递效果.

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

时间： 2024-10-10 23:49:04

Jquery 模态对话框 数据传递问题的相关文章

【精品推荐】web开发人员应该知道的31个jQuery模态对话框

在网站开发中经常会用到模态窗口,如果直接利用javascirpt的window.showModalDialog()打开一个模式窗口,虽然实现了模式窗口的功能,但十分的不好看.当我们遇到这样的需求时很多人会从网上寻找这些jQuery的模态对话框,有时候搜索了很多,但都不是很合适,那为什么人们喜欢模态窗口呢?那模态窗口到底有什么优点呢? 当一个模态窗口包含一个较小的元素时,用户并不需要加载一个完成的全新新页面就可以访问它.(达到同样效果的另一种方式来是使用基于AJAX的标签) . 通过模态窗口,您提

jquery模态对话框与clone的应用

内部插入:append() appendTo() prepend() prependTo() 外部插入:after() before() insertAfter() insertBefore() 替换:$().replaceWith() 删除与清空:remove() 删除标签 empty() 清空内容,保留标签 复制:clone() clone(true) <!DOCTYPE html> <html lang="en"> <head> <met

基于bootstrup的jQuery多功能模态对话框

这是一款非常实用的基于bootstrup的jQuery多功能模态对话框插件.该jQuery模态对话框集警告框.确认框和对话框于一体.是一款不可多得的多功能.多用途的模态对话框插件. 它的主要特点有: 可以通过AJAX直接将调用内容到对话框中. 可以在指定的时间后自动关闭对话框. 可以设置为点击模态背景不关闭对话框. 拥有丰富的回调函数. 在线演示:http://www.htmleaf.com/Demo/201502141378.html 下载地址:http://www.htmleaf.com/j

再谈MFC学习——模态对话框的数据传递

学习c++的目的就是为了使用封装好的类,而最最经典的封装类当然是微软的MFC窗口程序类.学习MFC编程之前要学习c++的主要知识,掌握c++的基本编程思想.下面就看下我学习的MFC模态对话框的数据传递. 首先,什么叫做模态对话框呢?模态对话框指的是当弹出这样的对话框的时候,程序不能相应除了此对话框外其他的窗口的响应,直到关闭了这个对话框,程序才能响应其他的对话框的响应.非模态对话框即使弹出也能响应程序其他的窗口而不需要等到此窗口的关闭.那么MFC中怎么才能弹出模态对话框呢?其实很简单,首先创建这

Bootstrap 模态对话框只加载一次 remote 数据的解决办法

前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. Bootstrap modals dialog hidden removeData 目录[-] 1. Bootstrap 模态对话框和简单使用 2. 使用 remote 选项让模态对话框加载页面到 .modal-body 中 2.1

Bootstrap 模态对话框只加载一次 remote 数据的解决办法(来源于网络)

1. Bootstrap 模态对话框和简单使用 1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="myModal" class="modal hide fade">     <div class="modal-header">         <button type="button" class="close" data-dismiss="

Django-website 程序案例系列-5 模态对话框实现提交数据

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ #隐藏效果 display: none; } .shade{ #模态框遮蔽层效果 position: fixed; top: 0; right: 0; left: 0; b

jQuery UI 对话框（Dialog） - 模态表单

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框(Dialog) - 模态表单</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquer

MFC中两个对话框之间数据传递

http://blog.csdn.net/foreverhuylee/article/details/21707197 这里有两种情况, 第一种情况是: (在一个基于单文档的应用程序中,新建了两个对话框A和B,并且用两个独立的类和他们关联) 对话框A中有一个编辑框, 按下A中的一个按钮a后弹出对话框B, B中也有一个编辑框b, 在B中输入数据 点击确定(ID0K)后 ,b中的数据能传到a,并且能显示出来 具体实现方法: 在A对话框的Button1按钮响应函数中,添加以下代码: void DlgA