Jquery-UI Pop Up

封装Dialog 方法

Step1:引入必要的 Css 文件 ：jquery-ui-1.10.0.custom.css

Step2:引入必要的JS文件：jquery-1.9.0.min.js  和 jquery-ui-1.10.0.custom.min.js

Step3:定义自己的JS文件：
　　　　　重写　Dialog　　方法
　　　　　
function addWindow(divId, title, url, heightVal, widthVal, closeMethod) {
$('#' + divId).dialog({  
title: title,
modal: true,
close:function(){
$('#' + divId).empty();
if (closeMethod) {
closeMethod();
} else {
$(this).dialog('destroy');
}
},
open: function(){
lockScrollbar($(this));
$(this).focus();
//load popup screen, in case timeout, force parent screen redirect to timeout screen.
$(this).load(encodeURI(url), function (responseText) {
if (responseText.indexOf('timeoutdiv') != -1) {
$('#' + divId).html("");
document.location.href = $("#contextPath").val() +"timeout.action";
}
});
},                 
height: heightVal,    
width: widthVal
});
}


function lockScrollbar(div){
$(div).bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;
    if (e.type == 'mousewheel') {
    //IE/Opera
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
    //Mozilla
        scrollTo = 40 * e.originalEvent.detail;
    }
    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});
}


使用封装的Dialog方法:
      step1:定义一个 DIV 隐藏起来
           <div id="createInternationalDiv" class="hide"></div>
      step2:定义一个按钮
      <input type="button" class="btn btn-danger" value="<s:text name='rsc.button.createCode' />" onclick="createCode();"/>
      step3:定义一个按钮单击函数:
function createCode() {

        addWindow('createInternationalDiv', '标题', 'international.create.input.action', 500, 950);
}


参考网址:  Jquery ui 中文手册 http://www.jqueryui.net/