模态框传值

最新推荐文章于 2022-04-26 01:34:57 发布

燕山月

最新推荐文章于 2022-04-26 01:34:57 发布

阅读量776

点赞数

文章标签： bootstrap 经验

原文作者：http://blog.youkuaiyun.com/luckyjiexu/article/details/68062634

经验证可用

bootstrap弹出框，根据点击将本文的内容添加到弹出框中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Modal</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">好友列表</div>
<div class="panel-body">
<div class="list-group" role="group" aria-label="好友列表">
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="张三">张三
</button>
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="李四">李四
</button>
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="王二">王二
</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
//绑定模态框展示的方法
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // 触发事件的按钮
var recipient = button.data('whatever') // 解析出whatever内容
var modal = $(this) //获得模态框本身
modal.find('.modal-title').text('Message To ' + recipient) // 更改将title的text
modal.find('.modal-body input').val(recipient)
})
</script>
</body>
</html>
效果展示：
使用模态框需要某种触发器（链接或者按钮）。
- 在模态框中需要注意两点：
  1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
  2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
- aria-labelledby="myModalLabel"，该属性引用模态框的标题。
- 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
- <div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
- class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
- data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
- class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
- class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
- data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
方法：与modal()一起使用

$('#identifier').modal({
keyboard: false
})

Toggle: .modal('toggle')手动切换模态框。

$('#identifier').modal('toggle')

Show: .modal('show')手动打开模态框。

$('#identifier').modal('show')

Hide: .modal('hide')手动隐藏模态框。

$('#identifier').modal('hide')

事件

事件描述实例show.bs.modal在调用 show 方法后触发。

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

hide.bs.modal当调用 hide 实例方法时触发。

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

hidden.bs.modal当模态框完全对用户隐藏时触发。

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})