转载自W3Cfuns的原生js弹窗组件练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div弹窗</title>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    height: 1000px;
}
a {
    color: #08c;
    text-decoration: none;
}
a:hover,a:focus {
    color: #005580;
    text-decoration: underline;
    cursor: pointer;
}
.showBtn {
    width: 700px;
    margin: 20px auto;
}
p {
    line-height: 26px;
    padding: 3px 0;
}
input {
    width: 100px;
    height: 26px;
    line-height: 26px;
    background: #eee;
    border: 1px #ccc solid;
    cursor: pointer;
    color: #F66;
    margin-left: 6px;
}
h4 {
    font-size: 17.5px;
    margin: 10px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    color: inherit;
    text-rendering: optimizelegibility
}
.popwind {
    width: 360px;
    padding: 32px 0;
    border-radius: 6px;
    background: #f0f0f0;
    display: none;
    overflow: hidden;
}
.popwind h3.mytitle {
    width: 100%;
    height: 30px;
    border-bottom: 2px #ddd solid;
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 1em;
    line-height: 30px;
    z-index: 0;
}
.popwind .content {
    position: relative;
    max-height: 400px;
    padding: 15px;
    overflow-y: auto;
}
.popwind .title {
    border: 1px solid #eee;
}
.popwind .tclose {
    font-size: 16px;
    position: absolute;
    right: 8px;
    top: 3px;
    cursor: pointer;
    z-index: 9;
}
.master {
    position: absolute;
    background: #000;
    opacity: 0;
    filter: alpha(opacity = 0);
    left: 0;
    top: 0;
}
.popwind .dragbar,.popwind .mytitle {
    cursor: move;
}
.popwind .bigest,.popwind .midBtn {
    position: absolute;
    top: 8px;
    right: 26px;
    border: 1px #666 solid;
    border-top: 3px #676767 solid;
    width: 12px;
    height: 8px;
    cursor: pointer;
    z-index: 5;
}
.popwind .midBtn {
    border: 2px #666 solid;
    border-top: 3px #676767 solid;
    border-bottom: 3px #676767 solid;
    width: 10px;
    height: 5px;
}
.popwind .popbottom {
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 2px #39F solid;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.asbanner {
    background: none;
}
.asbanner .content {
    display: none;
    border: 1px #06C solid;
}
.asbanner .easyshow {
    width: 60px;
    height: 30px;
    line-height: 30px;
    border: 2px #06F solid;
    text-align: center;
    border-radius: 4px;
    display: block;
    position: absolute;
    left: 0;
    top: 32px;
}
.asbanner .minBtn {
    text-align: center;
    padding: 0 6px;
    width: 60px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 0;
    top: 0;
    background: #f0f0f0;
    border: 1px #06c solid;
    border-bottom: none;
    cursor: pointer;
}
</style>
<!--<script src="dialog.js"></script>-->
<script>
    window.onload = function() {
        var aInp = document.getElementsByTagName('input');
        var aDiv = getByClass(document, 'div', 'popwind');
        var aA = getByClass(document, 'a', 'easyshow');
        var pop1 = new Popup(aDiv[0]);
        aInp[0].onclick = function() {
            pop1.init({
                pos : 'center',
                title : '常规的弹窗'
            });
            pop1.topClose();
        };
        var pop2 = new Popup(aDiv[0]);
        aInp[1].onclick = function() {
            pop2.init({
                pos : 'center',
                title : '添加了遮罩层的弹窗'
            });
            pop2.topClose();
            pop2.mast();
        };
        aInp[2].onclick = function() {
            pop2.init({
                pos : 'center',
                title : '移入效果的弹窗'
            });
            pop2.topClose();
            pop2.mast();
            pop2.moveIn();
        };
        aInp[3].onclick = function() {
            pop2.init({
                pos : 'center',
                title : '滚屏移动的弹窗',
                moveIn : true
            });
            pop2.topClose();
            pop2.mast();
            pop2.fixedPos();
            pop2.moveIn();
        };
        var pop3 = new Popup(aDiv[1]);
        aInp[4].onclick = function() {
            pop3.init({
                pos : 'center',
                title : '可以最大化的弹窗',
                moveIn : true
            });
            pop3.topClose();
            pop3.mast();
            pop3.fixedPos();
            pop3.moveIn();
            pop3.bigBtn();
        };
        aInp[5].onclick = function() {
            pop3.init({
                pos : 'center',
                title : '可以拖拽的弹窗',
                moveIn : true
            });
            pop3.topClose();
            pop3.mast();
            pop3.fixedPos();
            pop3.dragbar();
            pop3.moveIn();
        };
        aInp[6].onclick = function() {
            var pop4 = new Popup(aDiv[2]);
            pop4.init({
                pos : 'left-center'
            });
            pop4.fixedPos();
            pop4.minimize();
        };
    }
    var PopBig = true;
    var PopMid = true;
    function Popup(obj) {
        this.obj = obj;
        this.settings = {
            pos : 'center',
            title : '',
            moveIn : true
        };
        this.dragable = true;
        this.obj.tit = true;
    };
    Popup.prototype.init = function(opt) {
        extend(this.settings, opt || {});
        this.obj.style.display = 'block';
        this.setPos();
        var title = this.settings.title || this.obj.title;
        this.obj.title = '';
        if (this.obj.tit) {
            var oTitle = document.createElement('h3');
            oTitle.className = 'mytitle';
            oTitle.innerHTML = title;
            this.obj.appendChild(oTitle);
            this.obj.tit = false;
        }
        this.popClose();
    };
    Popup.prototype.topClose = function() {
        var This = this;
        var oClose = document.createElement('span');
        oClose.className = 'tclose';
        oClose.innerHTML = 'x';
        this.obj.appendChild(oClose);
        this.tclose = getByClass(this.obj, 'span', 'tclose')[0];
        oClose.onclick = function() {
            This.fnClose.call(This);
        }
    };
    Popup.prototype.popClose = function() {
        var This = this;
        var closePop = getByClass(this.obj, 'input', 'popclose');
        for (var i = 0; i < closePop.length; i++) {
            closePop[i].onclick = function() {
                This.fnClose.call(This);
            }
        }
    };
    Popup.prototype.fnClose = function() {
        var This = this;
        this.obj.removeChild(this.tclose);
        if (this.settings.movein) {
            startMove(this.obj, {
                opacity : 0,
                top : -80
            }, function() {
                This.obj.style.display = 'none';
            });
            setTimeout(function() {
                startMove(This.oMast, {
                    opacity : 0
                }, function() {
                    document.body.removeChild(This.oMast);
                });
            }, 300)
        } else {
            This.obj.style.display = 'none';
            this.oMast && startMove(this.oMast, {
                opacity : 0
            }, function() {
                document.body.removeChild(This.oMast);
            });
        }
    };
    Popup.prototype.setPos = function() {
        if (this.settings.pos == 'center') {
            this.obj.style.position = 'absolute';
            if (veiwWidth() < this.obj.offsetWidth) {
                this.obj.style.left = '0px';
            } else if (veiwHeight() < this.obj.offsetHeight) {
                this.obj.style.top = 0 + scrollY() + 'px';
            } else {
                this.obj.style.left = (veiwWidth() - this.obj.offsetWidth) / 2
                        + 'px';
                this.obj.style.top = (veiwHeight() - this.obj.offsetHeight) / 2
                        + scrollY() + 'px';
            }
        } else if (this.settings.pos == 'right-bottom') {
            this.obj.style.position = 'absolute';
            this.obj.style.left = veiwWidth() - this.obj.offsetWidth + 'px';
            this.obj.style.top = veiwHeight() - this.obj.offsetHeight
                    + scrollY() + 'px';
        } else if (this.settings.pos == 'left-center') {
            this.obj.style.position = 'absolute';
            this.obj.style.left = 0 + 'px';
            this.obj.style.top = (veiwHeight() - this.obj.offsetHeight) / 2
                    + scrollY() + 'px';
        }
    };
    Popup.prototype.fixedPos = function() {
        var This = this;
        window.onscroll = function() {
            //This.easyState = true;
            This.setPos();
        };
    };
    Popup.prototype.mast = function() {
        var This = this;
        var oDiv = document.createElement('div');
        oDiv.className = 'master';
        oDiv.style.width = veiwWidth() + 'px';
        oDiv.style.height = veiwHeight() + 'px';
        oDiv.style.zIndex = '666';
        this.obj.style.zIndex = '667';
        document.body.appendChild(oDiv);
        this.oMast = getByClass(document, 'div', 'master')[0];
        startMove(this.oMast, {
            opacity : 40
        });
        if (window.attachEvent) {
            window.attachEvent('resize', function() {
                This.oMast.style.width = veiwWidth() + 'px';
                This.oMast.style.height = veiwHeight() + 'px';
            });
            window.attachEvent('scroll', function() {
                This.oMast.style.top = scrollY() + 'px';
            });
        } else {
            window.addEventListener('resize', function() {
                This.oMast.style.width = veiwWidth() + 'px';
                This.oMast.style.height = veiwHeight() + 'px';
            }, false);
            window.addEventListener('scroll', function() {
                This.oMast.style.top = scrollY() + 'px';
            }, false);
        }
    };
    Popup.prototype.dragbar = function() {
        this.dragBar = getByClass(this.obj, 'h3', 'mytitle')[0];
        var d = new drag(this.dragBar, this.obj);
        d.init();
    };
    Popup.prototype.moveIn = function() {
        this.obj.style.top = '-200px';
        this.obj.style.opacity = '0';
        startMove(this.obj, {
            top : Math.floor((veiwHeight() - this.obj.offsetHeight) / 2),
            opacity : 100
        })
    };
    Popup.prototype.bigBtn = function() {
        var This = this;
        var big = document.createElement('span');
        big.className = 'bigest';
        if (PopBig) {
            this.obj.appendChild(big);
            PopBig = false;
        }
        this.bigBtn = getByClass(this.obj, 'span', 'bigest')[0];
        this.bigBtn.onclick = function() {
            This.changeBig();
        }
        this.W = css(this.obj, 'width');
        this.H = css(this.obj, 'height');
    };
    Popup.prototype.changeBig = function() {
        this.obj.style.left = '0';
        this.obj.style.top = '0';
        this.obj.style.width = veiwWidth() + 'px';
        this.obj.style.height = veiwHeight() - 2
                * parseInt(css(this.obj, 'padding')) + 'px';
        this.bigBtn.style.display = 'none';
        if (PopMid) {
            this.midBtn();
        }
        this.midBtn.style.display = 'block';
    };
    Popup.prototype.midBtn = function() {
        var This = this;
        var mid = document.createElement('span');
        mid.className = 'midBtn';
        if (PopMid) {
            this.obj.appendChild(mid);
            PopMid = false;
        }
        this.midBtn = getByClass(this.obj, 'span', 'midBtn')[0];
        this.midBtn.onclick = function() {
            This.changeMid();
        }
    };
    Popup.prototype.changeMid = function() {
        this.obj.style.width = parseInt(this.W) + 'px';
        this.obj.style.height = parseInt(this.H) + 'px';
        this.setPos();
        this.midBtn.style.display = 'none';
        this.bigBtn.style.display = 'block';
    }
    Popup.prototype.minimize = function() {
        this.obj.children[1].style.display = 'block';
        var W = parseInt(css(this.obj, 'width'));
        var H = parseInt(css(this.obj, 'height'));
        this.obj.children[1].style.display = 'none';
        this.obj.style.display = 'block';
        this.easyshow = getByClass(this.obj, 'div', 'easyshow')[0];
        this.obj.style.width = this.easyshow.offsetWidth + 'px';
        this.obj.style.height = this.easyshow.offsetHeight + 'px';
        this.obj.style.background = 'none';
        var This = this;
        this.easyshow.onclick = function() {
            This.easyshow.style.display = 'none';
            This.obj.children[1].style.display = 'block'
            startMove(This.obj, {
                width : W,
                height : H,
                top : scrollY() + Math.round((veiwHeight() - H) / 2)
            });
            This.minBtn();
            This.oMin.style.display = 'block';
            This.easyState = false;
        };
    };
    Popup.prototype.minBtn = function() {
        var This = this;
        var minBtn = document.createElement('div');
        minBtn.className = 'minBtn';
        minBtn.innerHTML = '<<收起';
        this.obj.appendChild(minBtn);
        this.oMin = getByClass(this.obj, 'div', 'minBtn')[0];
        this.oMin.style.display = 'block';
        this.oMin.onclick = function() {
            This.changeMin();
        };
    };
    Popup.prototype.changeMin = function() {
        var This = this;
        this.obj.removeChild(this.oMin)
        this.easyshow.style.display = 'block';
        this.easyshow.style.opacity = '0';
        this.easyshow.style.filter = 'alpha(opacity = 0)';
        startMove(this.obj, {
            width : This.easyshow.offsetWidth,
            height : parseInt(css(this.easyshow, 'height')),
            top : scrollY()
                    + Math.round(((veiwHeight() - parseInt(css(this.easyshow,
                            'width'))) / 2))
        }, function() {
            This.obj.children[1].style.display = 'none';
            This.easyshow.style.opacity = '1';
            This.easyshow.style.filter = 'alpha(opacity = 100)';
        });
        if (this.easyState) {
            this.obj.children[1].style.display = 'none';
            this.easyshow.style.opacity = '1';
            this.easyshow.style.filter = 'alpha(opacity = 100)';
        }
    };
    function getByClass(parent, tagName, className) {
        var aEls = parent.getElementsByTagName(tagName);
        var arr = [];
        var serchC = className.split(' ')
        for (var i = 0; i < aEls.length; i++) {
            var aClass = aEls[i].className.split(' ');
            for (var j = 0; j < aClass.length; j++) {
                for (var n = 0; n < serchC.length; n++) {
                    if (aClass[j] == serchC[n]) {
                        arr.push(aEls[i]);
                        break;
                    }
                }
            }
        }
        return arr;
    };
    function css(obj, attr) { //获取样式
        return obj.currentStyle ? obj.currentStyle[attr]
                : getComputedStyle(obj)[attr];
    }
    function veiwWidth() { //获取可视区宽
        return document.documentElement.clientWidth
                || document.body.clientWidth;
    };
    function veiwHeight() { //获取可视区高
        return document.documentElement.clientHeight
                || document.body.clientHeight;
    };
    function scrollY() { //滚动条高度
        return document.documentElement.scrollTop || document.body.scrollTop;
    };
    function extend(a, b) { //赋值
        for ( var attr in b) {
            a[attr] = b[attr];
        }
    };
    function startMove(obj, json, fn) { //缓冲运动
        clearInterval(obj.iTimer);
        var iSpeed = 0;
        var iCur = 0;
        obj.iTimer = setInterval(function() {
            var iBtn = true;
            for (attr in json) {
                if (attr == 'opacity') {
                    iCur = Math.round(css(obj, attr) * 100);
                } else {
                    iCur = parseInt(css(obj, attr));
                }
                iSpeed = (json[attr] - iCur) / 6;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur != json[attr]) {
                    iBtn = false;
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                        obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)
                                + ')';
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }
            }
            if (iBtn) {
                clearInterval(obj.iTimer);
                fn && fn.call(obj);
            }
        }, 30);
    };
    function drag(obj, moveEle) { //面向对象的拖拽
        this.obj = obj;
        this.moveEle = moveEle || obj;
        this.disX = 0;
        this.disY = 0;
    };
    drag.prototype.init = function() { //拖拽默认
        var This = this;
        this.obj. = function(ev) {
            var ev = ev || event;
            This.moveEle.disX = ev.clientX - This.moveEle.offsetLeft;
            This.moveEle.disY = ev.clientY - This.moveEle.offsetTop;
            var _this = This;
            document. = function(ev) {
                var ev = ev || event;
                var L = ev.clientX - This.moveEle.disX;
                var T = ev.clientY - This.moveEle.disY;
                if (L < 0) {
                    L = 0;
                } else if (L > veiwWidth() - This.moveEle.offsetWidth) {
                    L = veiwWidth() - This.moveEle.offsetWidth;
                }
                if (T < 0 + scrollY()) {
                    T = 0 + scrollY();
                } else if (T > veiwHeight() - This.moveEle.offsetHeight
                        + scrollY()) {
                    T = veiwHeight() - This.moveEle.offsetHeight + scrollY();
                }
                This.moveEle.style.left = L + 'px';
                This.moveEle.style.top = T + 'px';
            }
            document. = function() {
                document. = null;
                document. = null;
            };
            return false;
        }
    };
    function next(obj) {
        return obj.nextElementSibling || nextSibling;
    }
    function prev(obj) {
        return obj.previousElementSibling || previousSibling;
    }
</script>
</head>
<body>
    <div class="showBtn">
        <p>创建一个新弹窗：var pop1 = new Popup(aDiv[0]);
            //pop1(自定义一个弹窗),aDiv(class名为popwind的div标签)</p>
        <p>
            常规样式的弹窗：<br />pop1.init({//默认样式<br /> pos:'center',//弹窗所在位置<br />
            title:'我是标题',//标题内容，没有则可寻找
            <code><</code>
            div class="popwind"
            <code>></code>
            中的title<br /> });<br /> pop1.topClose();//添加关闭按钮 <input
                type="button" value="常规的弹窗" />
        </p>
        <p>
            添加遮罩层: pop2.mast();//添加遮罩层<input type="button" value="添加了遮罩层" />
        </p>
        <p>
            移入效果的弹窗：添加pop2.moveIn();<input type="button" value="移入效果" />
        </p>
        <p>
            滚屏跟随移动：添加pop2.fixedPos(); <input type="button" value="滚屏移动" />
        </p>
        <p>
            添加最大化按钮：添加pop2.bigBtn();<input type="button" value="可以最大化" />
        </p>
        <p>
            可以拖拽弹窗：添加pop2.dragbar();;<input type="button" value="可以拖拽" />
        </p>
        <p>
            作为侧边推荐窗：class为'easyshow'里的内容为简略状态 -设置pop3.minimize();<input
                type="button" value="推荐" />
        </p>
        <p>input标签 添加class"popclose"即可添加关闭弹窗功能</p>
    </div>
    <div class="popwind">
        <div class="content">
            <h4>模态对话框中的文本</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem.</p>
            <h4>Popover in a modal</h4>
            <p>
                This <a href="#" role="button" class="btn popover-test" title=""
                    data-content="And here's some amazing content. It's very engaging. right?"
                    data-original-title="A Title">button</a> should trigger a popover
                on click.
            </p>
            <h4>Tooltips in a modal</h4>
            <p>
                <a href="#" class="tooltip-test" title=""
                    data-original-title="Tooltip">This link</a> and <a href="#"
                    class="tooltip-test" title="" data-original-title="Tooltip">that
                    link</a> should have tooltips on hover.
            </p>
            <hr>
                <h4>Overflowing text to show optional scrollbar</h4>
                <p>
                    We set a fixed
                    <code>max-height</code>
                    on the
                    <code>.modal-body</code>
                    . Watch it overflow with all this extra lorem ipsum text we've
                    included.
                </p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
                    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
                    porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
                    faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
                    commodo cursus magna, vel scelerisque nisl consectetur et. Donec
                    sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
                    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
                    porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
                    faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
                    commodo cursus magna, vel scelerisque nisl consectetur et. Donec
                    sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <div class="popbottom">
            <input type="button" value="完成" class="popclose eee" />
            <input type="button" value="关闭" class="popclose" />
        </div>
    </div>
    <div class="popwind">
        <div class="content">
            <h4>模态对话框中的文本</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem.</p>
            <h4>Popover in a modal</h4>
            <p>
                This <a href="#" role="button" class="btn popover-test" title=""
                    data-content="And here's some amazing content. It's very engaging. right?"
                    data-original-title="A Title">button</a> should trigger a popover
                on click.
            </p>
            <h4>Tooltips in a modal</h4>
            <p>
                <a href="#" class="tooltip-test" title=""
                    data-original-title="Tooltip">This link</a> and <a href="#"
                    class="tooltip-test" title="" data-original-title="Tooltip">that
                    link</a> should have tooltips on hover.
            </p>
            <hr>
                <h4>Overflowing text to show optional scrollbar</h4>
                <p>
                    We set a fixed
                    <code>max-height</code>
                    on the
                    <code>.modal-body</code>
                    . Watch it overflow with all this extra lorem ipsum text we've
                    included.
                </p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
                    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
                    porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
                    faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
                    commodo cursus magna, vel scelerisque nisl consectetur et. Donec
                    sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
                    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
                    porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
                    faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
                    commodo cursus magna, vel scelerisque nisl consectetur et. Donec
                    sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <div class="popbottom"></div>
    </div>
    <div class="popwind asbanner" title="推荐">
        <div class="easyshow">
            <a href="javascript:;">收起状态</a>
        </div>
        <div class="content">
            <h4>模态对话框中的文本</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem.</p>
            <h4>Popover in a modal</h4>
            <p>
                This <a href="#" role="button" class="btn popover-test" title=""
                    data-content="And here's some amazing content. It's very engaging. right?"
                    data-original-title="A Title">button</a> should trigger a popover
                on click.
            </p>
            <h4>Tooltips in a modal</h4>
            <p>
                <a href="#" class="tooltip-test" title=""
                    data-original-title="Tooltip">This link</a> and <a href="#"
                    class="tooltip-test" title="" data-original-title="Tooltip">that
                    link</a> should have tooltips on hover.
            </p>
            <hr>
                <h4>Overflowing text to show optional scrollbar</h4>
                <p>
                    We set a fixed
                    <code>max-height</code>
                    on the
                    <code>.modal-body</code>
                    . Watch it overflow with all this extra lorem ipsum text we've
                    included.
                </p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
                    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
                    porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
                    faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
                    commodo cursus magna, vel scelerisque nisl consectetur et. Donec
                    sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
                    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
                    porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
                    faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
                    commodo cursus magna, vel scelerisque nisl consectetur et. Donec
                    sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
    </div>
</body>
</html>