实现功能:
1.修改标题样式。把jquery ui的标题样式放上去。支持换肤。
2.修改按钮样式,换成jqueryui的button按钮样式。
3.将模式化窗口的背景换成了jqueryui的模式化背景。
代码:
//首先要引入jquery,以及ui的包和皮肤的样式如:
<script src="../js/ui/jquery-1.11.0.min.js"></script>
<script src="../js/ui/jquery-migrate-1.1.0.min.js"></script>
<script src="../js/ui/minified/jquery.ui.core.min.js"></script>
<script src="../js/ui/minified/jquery.ui.widget.min.js"></script>
<script src="../js/ui/minified/jquery.ui.mouse.min.js"></script>
<script src="../js/ui/minified/jquery.ui.button.min.js"></script>
<script src="../js/ui/minified/jquery.ui.draggable.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/ui/themes/humanity/jquery-ui.css"></link>(function($) {
$.alerts = {
// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
repositionOnResize: true, // re-centers the dialog on window resize
overlayOpacity: .01, // transparency level of overlay
overlayColor: '#FFF', // base color of overlay
draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
okButton: ' 确认 ', // text for the OK button
cancelButton: ' 取消 ', // text for the Cancel button
dialogClass: null, // if specified, this class will be applied to all dialogs
// Public methods
alert: function(message, title, callback) {
if( title == null ) title = 'Alert';
$.alerts._show(title, message, null, 'alert', function(result) {
if( callback ) callback(result);
});
},
confirm: function(message, title, callback) {
if( title == null ) title = 'Confirm';
$.alerts._show(title, message, null, 'confirm', function(result) {
if( callback ) callback(result);
});
},
prompt: function(message, value, title, callback) {
if( title == null ) title = 'Prompt';
$.alerts._show(title, message, value, 'prompt', function(result) {
if( callback ) callback(result);
});
},
// Private methods
_show: function(title, msg, value, type, callback) {
$.alerts._hide();
$.alerts._overlay('show');
$("BODY").append(
'<div id="popup_container" style="width:300px;height:150px;">' +
'<h2 id="popup_title" style="margin:0;padding:0;" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"></h2>' +
'<div id="popup_content">' +
'<div id="popup_message"></div>' +
'</div>' +
'</div>');










