bootstrap中有 插件modal也就是对话框，加入拖拽功能，具体内容如下

在使用modal时首选需要引用js

<  href=\"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css\" rel=\"stylesheet\">
<  src=\"//cdn.bootcss.com/jquery/2.1.4/jquery.js\"></ >
<  src=\"//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js\"></ > // 完成拖拽功能
<  src=\"//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js\"></ > // 完成Modal

编辑Html代码

<!DOCTYPE html>
<html lang=\"en\">
<head>
 <  charset=\"UTF-8\">
 < >BootStrap Modal</ >
 <  href=\"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"stylesheet\">
 <  src=\"//cdn.bootcss.com/jquery/2.1.4/jquery.js\"></ >
 <  src=\"//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js\"></ >
 <  src=\"//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js\"></ >
</head>
<body>
 <button class=\"btn btn-default\">显示Modal</button>
 
 <div class=\"modal fade\">
 <div class=\"modal-dialog\">
 <div class=\"modal-content\">
 <div class=\"modal-header\">
 <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">
 <span aria-hidden=\"true\">×</span>
 </button>
 <h4 class=\"modal- \">Modal  </h4>
 </div>
 <div class=\"modal-body\">
 <p>One fine body…</p>
 </div>
 <div class=\"modal-footer\">
 <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>
 <button type=\"button\" class=\"btn btn-primary\">Save changes</button>
 </div>
 </div>
 <!-- /.modal-content --> 
 </div>
 <!-- /.modal-dialog --> 
 </div>
 <!-- /.modal -->
<  type=\"text/ \">
 var $button = $(\'.btn-default\'),
 $modal = $(\'#myModal\');
 $(function(){
 $button.on(\'click\',function(event) {
 event.preventDefault();
 /* Act on the event */
 $modal.show(
 \'500\',
 function() {
 var modal = $(this);
 modal.find(\'.modal- \').text(\'New message to \');
 $.ajax({});
 });
 $modal.modal(\'show\');
 });
 });
 </ >
 
</body>
</html>

要完成拖拽功能需要修改一下 

<  type=\"text/ \">
 var $button = $(\'.btn-default\'),
 $modal = $(\'#myModal\');
 $(function(){
 $button.on(\'click\',function(event) {
 event.preventDefault();
 /* Act on the event */
 $modal.show(
 \'500\',
 function() {
 var modal = $(this);
 modal.find(\'.modal- \').text(\'New message to \');
 $.ajax({});
 });
 /* 完成拖拽 */
 $modal.draggable({
 cursor: \"move\",
 handle: \'.modal-header\'
 });
 $modal.modal(\'show\');
 });
});
</ >

推荐

有关bootstrap modal插件使用详细请看：链接地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章