Bootstrap模态框小demo(弹出框)

非常的好用 

ctrl  c  +  ctrl  v

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 模态框(Modal)</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    点击
</button>
<br><br>
<div class="vv">你想要获取的值</div>

<!-- 模态框(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">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框(Modal)标题
                </h4>
            </div>
            <div class="modal-body">
                <div class="vv-1"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id='bt'>
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->


</div>

<script type="text/javascript">

$('#myModal').on('show.bs.modal', function () {
    var z=$('.vv').text()
  alert('点击了 按钮 ,这时候把获取到的value值 嵌入到后来的弹出框中')
  $('.vv-1').text(z)
})


$('#myModal').on('hide.bs.modal', function () {
  alert('消失隐藏 了 ')
})

$('#bt').click(function(){
    alert('点击了确定 触发事件')
    $('#myModal').modal('hide')
})
</script>
</body>
</html>

方法

下面是一些可与 modal() 一起使用的有用的方法。

方法描述实例
Options: .modal(options)把内容作为模态框激活。接受一个可选的选项对象。
$('#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 () {
  // 执行一些动作...
})

小demo

runoob 教程地址

bootstrap modal-dialog

回到顶部