jQuery 入门教程(34): jQuery UI Dialog 示例（二）

最新推荐文章于 2024-12-08 14:15:36 发布

最新推荐文章于 2024-12-08 14:15:36 发布 · 150 阅读

文章标签：

#ui #javascript #ViewUI

本文介绍了如何在jQuery中创建模式对话框，并通过配置modal属性使其显示为模式。此外，文章详细阐述了如何添加确认和取消按钮，以及如何通过CSS移除对话框右上角的关闭按钮。

模式对话框

如想对话框显示为模式的，可以通过配置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>