html拖拽模态框,可拖动模态窗体.html

jQuery UI 可拖动模态窗体

body{font: 62.5% "Trebuchet MS", sans-serif;margin: 50px;}

.demoHeaders{margin-top: 2em;}

#dialog-link{padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

#dialog-link span.ui-icon{margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

Dialog

Open Dialog

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

$( "#dialog" ).dialog({

autoOpen: false,

width: 400,

buttons: [

{

text: "Ok",

click: function() {

$( this ).dialog( "close" );

}

},

{

text: "Cancel",

click: function() {

$( this ).dialog( "close" );

}

}

]

});

// Link to open the dialog

$( "#dialog-link" ).click(function( event ) {

$( "#dialog" ).dialog( "open" );

event.preventDefault();

});

// Hover states on the static widgets

$( "#dialog-link, #icons li" ).hover(

function() {

$( this ).addClass( "ui-state-hover" );

},

function() {

$( this ).removeClass( "ui-state-hover" );

}

);

一键复制

编辑

Web IDE

原始数据

按行查看

历史