bootstrap弹出框

来源：互联网发布：js创建一个对象的方法编辑：程序博客网时间：2024/06/05 14:11
弹出框

<!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, user-scalable=no">    <title>XXX</title>    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">    <link rel="stylesheet" href="css/main.css">    <!--[if lt IE 9]>    <script src="lib/html5shiv/html5shiv.min.js"></script>    <script src="lib/respond/respond.min.js"></script>    <![endif]--></head><body style="margin: 200px;"><!--弹出框需要 data-toggle title data-content 还有jQuery:$('button').popover(); 弹出框的属性与工具提示一样，可以参考工具提示 --><button class="btn btn-danger" id="btn1"        data-toggle="popover"        title="我是标题"        data-content="我是其中的内容，这里面的内容既可以是文本，也可以是图片或者其他的HTML，或者一些链接什么的">点击弹出框</button><br><br><br><br><br><!--加一个外围容器data-viewport 设置外围容器的边际--><div id="view" style="width: 300px;height: 200px;border: 1px solid red">    <button class="btn btn-danger" id="btn2"            data-toggle="popover"            title="我是标题"            data-content="我是其中的内容，这里面的内容既可以是文本，也可以是图片或者其他的HTML，或者一些链接什么的"    >点击弹出框    </button></div><script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/main.js"></script><script>    $('#btn1').popover();    $('#btn2').popover({        viewport : {            selector : '#view',//            padding : 10,不写默认为0        }    });    /*其他方法和事件跟工具提示一样*/</script></body></html>
阅读全文
0 0