bootstrap模态框(弹出框),如何添加传参事件

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

  1. >  
  2. <html lang="zh-CN">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <title>Bootstrap Modaltitle>  
  8.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  9. head>  
  10. <body>  
  11.   
  12.   
  13. <div class="panel panel-default">  
  14.     <div class="panel-heading">好友列表div>  
  15.     <div class="panel-body">  
  16.         <div class="list-group" role="group" aria-label="好友列表">  
  17.             <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
  18.                     data-whatever="张三">张三  
  19.             button>  
  20.             <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
  21.                     data-whatever="李四">李四  
  22.             button>  
  23.             <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"  
  24.                     data-whatever="王二">王二  
  25.             button>  
  26.         div>  
  27.     div>  
  28. div>  
  29.   
  30. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">  
  31.     <div class="modal-dialog" role="document">  
  32.         <div class="modal-content">  
  33.             <div class="modal-header">  
  34.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span  
  35.                         aria-hidden="true">×span>button>  
  36.                 <h4 class="modal-title" id="exampleModalLabel">New messageh4>  
  37.             div>  
  38.             <div class="modal-body">  
  39.                 <form>  
  40.                     <div class="form-group">  
  41.                         <label for="recipient-name" class="control-label">Recipient:label>  
  42.                         <input type="text" class="form-control" id="recipient-name">  
  43.                     div>  
  44.                     <div class="form-group">  
  45.                         <label for="message-text" class="control-label">Message:label>  
  46.                         <textarea class="form-control" id="message-text">textarea>  
  47.                     div>  
  48.                 form>  
  49.             div>  
  50.             <div class="modal-footer">  
  51.                 <button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>  
  52.                 <button type="button" class="btn btn-primary">Send messagebutton>  
  53.             div>  
  54.         div>  
  55.     div>  
  56. div>  
  57. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>  
  58. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>  
  59. <script> 
  60.      //绑定模态框展示的方法 
  61.     $('#exampleModal').on('show.bs.modal', function (event) {  
  62.         var button = $(event.relatedTarget) // 触发事件的按钮  
  63.         var recipient = button.data('whatever') // 解析出whatever内容  
  64.         var modal = $(this)  //获得模态框本身
  65.         modal.find('.modal-title').text('Message To ' + recipient)  // 更改将title的text
  66.         modal.find('.modal-body input').val(recipient)  
  67.     })  
  68. script>  
  69. body>  
  70. html>  
  71. 效果展示:

  72. 使用模态框需要某种触发器(链接或者按钮)。
    • 在模态框中需要注意两点:
      1. 第一是 .modal,用来把
        的内容识别为模态框。
      2. 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
    • aria-labelledby="myModalLabel",该属性引用模态框的标题。
    • 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
    • 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()一起使用
  73. $('#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 () {
      // 执行一些动作...
    })



你可能感兴趣的:(bootstrap模态框(弹出框),如何添加传参事件)