微客导航 » 文章资讯 » BootStrap modal实现拖拽功能

BootStrap modal实现拖拽功能

2023-09-05 02:12:04 189

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

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



//完成拖拽功能
//完成Modal

编辑Html代码





BootStrapModal






显示Modal






×

Modaltitle

Onefinebody…

Close Savechanges

var$button=$('.btn-default'), $modal=$('#myModal'); $(function(){ $button.on('click',function(event){ event.preventDefault(); /*Actontheevent*/ $modal.show( '500', function(){ varmodal=$(this); modal.find('.modal-title').text('Newmessageto'); $.ajax({}); }); $modal.modal('show'); }); });

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


var$button=$('.btn-default'),
$modal=$('#myModal');
$(function(){
$button.on('click',function(event){
event.preventDefault();
/*Actontheevent*/
$modal.show(
'500',
function(){
varmodal=$(this);
modal.find('.modal-title').text('Newmessageto');
$.ajax({});
});
/*完成拖拽*/
$modal.draggable({
cursor:"move",
handle:'.modal-header'
});
$modal.modal('show');
});
});

BootStrap modal实现拖拽功能

热门推荐

随机推荐