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">×</button> <h4 class="modal-title">标题信息</h4> </div> <div class="modal-body"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0