jQuery 入门教程(34): jQuery UI Dialog 示例（二）-优快云博客

模式对话框

如想对话框显示为模式的，可以通过配置modal: true来设置。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#dialog-modal").dialog({ 
 
height: 140, 
 
modal: true 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    19
 
<divid="dialog-modal"title="Basic modal dialog"> 
 
<p> 
 
Adding the modal overlay screen makes the dialog 
 
look more prominent because it dims out the page content. 
 
</p> 
 
</div> 
 
    26
 
<p> 
 
Sed vel diam id libero <ahref="http://example.com">rutrum convallis</a>. 
 
Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. 
 
Etiam bibendum, enim faucibus aliquet rhoncus, 
 
arcu felis ultricies neque, sit amet auctor elit eros a lectus. 
 
</p> 
 
</body> 
 
</html>

添加确认和取消按钮
可以通过配置主按钮，和从按钮的方法来为对话框添加按钮，此时如果需要把”X”从右上角去掉，可以通过CSS来实现，具体可以参考下例：使用dialogClass: “no-close”

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<style> 
 
.no-close .ui-dialog-titlebar-close { 
 
display: none; 
 
} 
 
</style> 
 
<script> 
 
$(function () { 
 
$("#dialog-confirm").dialog({ 
 
dialogClass: "no-close", 
 
resizable: false, 
 
width: 400, 
 
height: 250, 
 
modal: true, 
 
buttons: { 
 
"Delete all items": function () { 
 
$(this).dialog("close"); 
 
}, 
 
Cancel: function () { 
 
$(this).dialog("close"); 
 
} 
 
} 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    35
 
<divid="dialog-confirm"title="Empty the recycle bin?"> 
 
<p> 
 
    38
 
<spanclass="ui-icon ui-icon-alert" 
 
style="float: left; margin: 0 7px 20px 0;"></span> 
 
These items will be permanently deleted 
 
and cannot be recovered. Are you sure? 
 
</p> 
 
</div> 
 
    45
 
<p> 
 
Sed vel diam id libero <ahref="http://example.com">rutrum convallis</a>. 
 
Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. 
 
Etiam bibendum, enim faucibus aliquet rhoncus, 
 
arcu felis ultricies neque, 
 
sit amet auctor elit eros a lectus. 
 
</p> 
 
    53
 
    54
 
</body> 
 
</html>