使用Google Closure的ModalPopup或Dialog

时间:2013-10-04 12:34:25

标签: javascript google-closure google-closure-library

点击“添加员工”链接后,必须出现一个ppopup字段以接受用户详细信息。我尝试了很多东西,但最后打开了一个新窗口而不是弹出窗口。如何让以下代码在弹出窗口或对话框或ModalPopup中工作

function newUsr() {
    var li = new goog.ui.LabelInput('Employee ID');
    li.render(goog.dom.getElement('d'));
    var li1 = new goog.ui.LabelInput('First Name');
    li1.render(goog.dom.getElement('d1'));
    var li2 = new goog.ui.LabelInput('Last Name');
    li2.render(goog.dom.getElement('d2'));
    var li3 = new goog.ui.LabelInput('Email Id');
    li3.render(goog.dom.getElement('d3'));
    var li4 = new goog.ui.LabelInput('Date Of Birth(yyyy-mm-dd)');
    li4.render(goog.dom.getElement('d4'));
    var li5 = new goog.ui.LabelInput('Date Of Joining(yyyy-mm-dd)');
    li5.render(goog.dom.getElement('d5'));
    var li6 = new goog.ui.LabelInput('Phone');
    li6.render(goog.dom.getElement('d6'));
    var fb1 = new goog.ui.Button('Submit', goog.ui.FlatButtonRenderer
            .getInstance());
    fb1.render(goog.dom.getElement('fb1'));
    goog.events.listen(fb1, goog.ui.Component.EventType.ACTION, function(e) {
        alert(" " + li.getValue() + " " + li1.getValue() + " ");
        var request = new goog.net.XhrIo();
        var data = new goog.Uri.QueryData();
        data.set('emp_id', li.getValue());
        data.set('first_name', li1.getValue());
        data.set('last_name', li2.getValue());
        data.set('email', li3.getValue());
        var d1 = new Date(li4.getValue());
        var d2 = new Date(li5.getValue());
        data.set('dob', li4.getValue());
        data.set('doj', li5.getValue());
        data.set('phone', li6.getValue());
        request.send('newUser', 'POST' , data.toString());
    });
}
Date.prototype.yyyymmdd = function() {         

    var yyyy = this.getFullYear().toString();                                    
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based         
    var dd  = this.getDate().toString();             

    return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};  

1 个答案:

答案 0 :(得分:0)

请告诉我们您如何创建和处理“添加员工”链接,否则很难回答这个问题。如果您将goog.events.EventType.CLICK事件的事件侦听器附加到链接,并且链接的默认行为是打开一个新窗口(即它具有target属性),那么您可以阻止默认使用preventDefault()的行为。在您的事件处理程序中,您可以打开自定义对话框,例如使用goog.ui.Popupgoog.ui.Dialog

例如:

<a href="someurl" id="add">add employee</a>

你做了

goog.events.listen(document.getElementById('add'), goog.events.EventType.CLICK, function(e) {e.preventDefault(); e.stopPropagation(); var dlg = new goog.ui.Dialog(); ...});