本文介绍了日历弹出另一个弹出窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好,



我正在尝试使用devexpress控件开发页面,其中日历控件将在一个模态弹出控件中打开。我使用下面的javascript函数来显示日历控件,但每当我尝试从模式弹出窗口打开日历控件时,日历图像就会出现在模式弹出窗口后面,因此无法点击。



Javascript函数-----



Hi There,

I am trying to develop a page using devexpress control, where a calendar control would open up in one modal pop up control. I am using the below javascript function to show the calendar control, but whenever I am trying to open the calendar control from a modal pop up, the calendar image is coming up behind the modal pop up and hence that is not clickable.

Javascript Function -----

// implementation
function tcal(a_cfg, a_tpl) {

    // apply default template if not specified
    if (!a_tpl)
        a_tpl = A_TCALDEF;

    // register in global collections
    if (!window.A_TCALS)
        window.A_TCALS = [];
    if (!window.A_TCALSIDX)
        window.A_TCALSIDX = [];

    this.s_id = a_cfg.id ? a_cfg.id : A_TCALS.length;
    window.A_TCALS[this.s_id] = this;
    window.A_TCALSIDX[window.A_TCALSIDX.length] = this;

    // assign methods
    this.f_show = f_tcalShow;
    this.f_hide = f_tcalHide;
    this.f_toggle = f_tcalToggle;
    this.f_update = f_tcalUpdate;
    this.f_relDate = f_tcalRelDate;
    this.f_parseDate = f_tcalParseDate;
    this.f_generDate = f_tcalGenerDate;

    // create calendar icon
    this.s_iconId = 'tcalico_' + this.s_id;
    //alert(this.s_iconId);
    this.e_icon = f_getElement(this.s_iconId); //alert(this.s_iconId);
    if (!this.e_icon) {
        document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" border="0" alt="Open Calendar" />');
        this.e_icon = f_getElement(this.s_iconId);
    }
    // save received parameters
    this.a_cfg = a_cfg;
    this.a_tpl = a_tpl;
}

function f_tcalShow(d_date) {
    vDateControlId = this.a_cfg.controlname;

    // find input field
    if (!this.a_cfg.controlname)
        throw ("TC: control name is not specified");
    if (this.a_cfg.formname) {
        var e_form = document.forms[this.a_cfg.formname];
        if (!e_form)
            throw ("TC: form '" + this.a_cfg.formname + "' can not be found");
        this.e_input = e_form.elements[this.a_cfg.controlname];
    }
    else
        this.e_input = f_getElement(this.a_cfg.controlname);

    if (!this.e_input || !this.e_input.tagName || this.e_input.tagName != 'INPUT')
        throw ("TC: element '" + this.a_cfg.controlname + "' does not exist in "
            + (this.a_cfg.formname ? "form '" + this.a_cfg.controlname + "'" : 'this document'));

    // dynamically create HTML elements if needed
    this.e_div = f_getElement('tcal');
    if (!this.e_div) {
        this.e_div = document.createElement("DIV");
        this.e_div.id = 'tcal';
        document.body.appendChild(this.e_div);
    }
    this.e_shade = f_getElement('tcalShade');
    if (!this.e_shade) {
        this.e_shade = document.createElement("DIV");
        this.e_shade.id = 'tcalShade';
        document.body.appendChild(this.e_shade);
    }
    this.e_iframe = f_getElement('tcalIF')
    if (b_ieFix && !this.e_iframe) {
        this.e_iframe = document.createElement("IFRAME");
        this.e_iframe.style.filter = 'alpha(opacity=0)';
        this.e_iframe.id = 'tcalIF';
        this.e_iframe.src = this.a_tpl.imgpath + 'pixel.gif';
        document.body.appendChild(this.e_iframe);
    }

    // hide all calendars
    f_tcalHideAll();

    // generate HTML and show calendar
    this.e_icon = f_getElement(this.s_iconId);
    if (!this.f_update())
        return;

    this.e_div.style.visibility = 'visible';
    this.e_shade.style.visibility = 'visible';
    if (this.e_iframe)
        this.e_iframe.style.visibility = 'visible';

    // change icon and status
    this.e_icon.src = this.a_tpl.imgpath + 'no_cal.gif';
    this.e_icon.title = 'Close Calendar';
    this.b_visible = true;
}





下面是我调用函数的aspx文件,



< dx:ASPxPopupControl ID =ShpAddressrunat =serverModal =TruePopupHorizo​​ntalAlign =WindowCenter

PopupVerticalAlign =WindowCenterClientInstanceName =ShpAddress HeaderText =选择发货地址和交货日期:

CloseAction =无AllowDragging =TrueEnableAnimation =FalseEnableViewState =true>

< ; ContentCollection>

< dx:PopupControlContentControl ID =PopupControlContentControl2runat =server>

< dx:ASPxPanel ID =ASPxPanel1runat =server DefaultButton =btOK>

< PanelCollection>

< dx:PanelContent ID =PanelContent2runat =server>

< table cellpadding =0cellspacing =0>

< tr>

< td rowspan =3>

< div class =pcmSideSpacer>

< / div>

< / td>

< td> ;

< table>

< tr>

< td>

< asp:RadioButtonList ID =radiolist1Width =300pxHeight =50pxrunat =server>

< / asp:RadioButtonList>

< br />

< / td>

< / tr>

< tr>

< td valign =top>



< asp:TextBox ID = txtboxDelDateonKeyPress =return onKeyPressForControls(); RUNAT = 服务器 > < / asp:TextBox>

< script language =JavaScripttype =text / javascript>

new tcal({'formname':'aspnetForm ','controlname':'ctl00_MainContent_ShpAddress_ASPxPanel1_txtboxDelDate'});

< / script>

< / td>

< / tr> ;

< tr>

< td>

< asp:Label ID =lbldeldaterunat =serverText = 实际交付日期受B2B代理商审核和批准>< / asp:标签> ;

< / td>

< / tr>

< tr>

< td> ;

< dx:ASPxButton ID =ASPxButton1runat =serverText =OKWidth =80pxAutoPostBack =False>

< ; ClientSideEvents Click =function(s,e){ShpAddress.Hide(); }>

< / dx:ASPxButton>

< / td>

< / tr>

< / table>

< / td>

< td rowspan =3>

< div class =pcmSideSpacer>

< / div>

< / td>

< / tr>

< / table>

< / dx:PanelContent>

< / Pan elCollection>

< / dx:ASPxPanel>

< / dx:PopupControlContentControl>

< / ContentCollection>

< ContentStyle>

< Paddings PaddingBottom =5px/>

< Paddings PaddingBottom =5px>< / Paddings>

< / ContentStyle>

< / dx:ASPxPopupControl>



你能帮帮我吗?



谢谢和问候,

Aniket



Below is the aspx file from where I am calling the function,

<dx:ASPxPopupControl ID="ShpAddress" runat="server" Modal="True" PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="WindowCenter" ClientInstanceName="ShpAddress" HeaderText="Select Ship Address and Delivery Date:"
CloseAction="None" AllowDragging="True" EnableAnimation="False" EnableViewState="true">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl2" runat="server">
<dx:ASPxPanel ID="ASPxPanel1" runat="server" DefaultButton="btOK">
<PanelCollection>
<dx:PanelContent ID="PanelContent2" runat="server">
<table cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<div class="pcmSideSpacer">
</div>
</td>
<td>
<table>
<tr>
<td>
<asp:RadioButtonList ID="radiolist1" Width="300px" Height="50px" runat="server">
</asp:RadioButtonList>
<br />
</td>
</tr>
<tr>
<td valign="top">

<asp:TextBox ID="txtboxDelDate" onKeyPress="return onKeyPressForControls();" runat="server"> </asp:TextBox>
<script language="JavaScript" type="text/javascript">
new tcal({ 'formname': 'aspnetForm', 'controlname': 'ctl00_MainContent_ShpAddress_ASPxPanel1_txtboxDelDate' });
</script>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbldeldate" runat="server" Text = "Actual Delivery Date subject to B2B agent review and approval"></asp:Label>
</td>
</tr>
<tr>
<td>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="OK" Width="80px" AutoPostBack="False">
<ClientSideEvents Click="function(s, e) { ShpAddress.Hide(); }" />
</dx:ASPxButton>
</td>
</tr>
</table>
</td>
<td rowspan="3">
<div class="pcmSideSpacer">
</div>
</td>
</tr>
</table>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</dx:PopupControlContentControl>
</ContentCollection>
<ContentStyle>
<Paddings PaddingBottom="5px" />
<Paddings PaddingBottom="5px"></Paddings>
</ContentStyle>
</dx:ASPxPopupControl>

Could you please help me on this?

Thanks and Regards,
Aniket

推荐答案


这篇关于日历弹出另一个弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 03:24