bootstrap+jquery-ui实现可拖动的弹出框效果代码

代码语言:html

所属分类:弹出层

代码描述:bootstrap+jquery-ui实现可拖动的弹出框效果代码

代码标签: bootstrap jquery-ui 可拖动 弹出框

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        button.btn-settings{margin:25px;padding:20px 30px;font-size:1.2em;background-color:#337ab7;color:white}button.btn-settings:active{color:white}.modal{overflow:hidden}.modal-dialog{margin-right:0;margin-left:0}.modal-header{height:30px;padding:20px;background-color:#18456b;color:white}.modal-title{margin-top:-10px;font-size:16px}.modal-header .close{margin-top:-10px;color:#fff}.modal-body{color:#888;padding:5px 35px 20px}.modal-body h3{text-align:center}.modal-body p{padding-top:10px;font-size:1.1em}
    </style>
</head>

<body>
    <button href="#myModal" class="btn btn-settings" data-backdrop="false" data-toggle="modal">打开</button>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">标题信息</h4>
                </div>
                <div class="modal-body">
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0