显示 ModalPopupExtender 时如何指定要运行的 javascript

Posted 2023-02-14

【中文标题】显示 ModalPopupExtender 时如何指定要运行的 javascript

【英文标题】：How to specify javascript to run when ModalPopupExtender is shown

【发布时间】：2010-09-05 13:12:46

【问题描述】：

ASP.NET AJAX ModalPopupExtender 有OnCancelScript 和OnOkScript 属性，但它似乎没有OnShowScript 属性。我想指定一个 javascript 函数在每次显示弹出窗口时运行。

在过去的情况下，我将TargetControlID 设置为一个虚拟控件并提供我自己的控件，该控件首先执行一些 JS 代码，然后使用 JS 方法显示弹出窗口。但在这种情况下，我将显示来自客户端和服务器端代码的弹出窗口。

有人知道怎么做吗？

顺便说一句，我需要这个，因为我在模态中有一个文本框，我想制作一个 TinyMCE 编辑器。但是 TinyMCE 初始化脚本不适用于不可见的文本框，所以我必须在显示模式时找到一种方法来运行它

【问题讨论】：

他们向您展示了如何手动引发事件，而不是如何附加到它：asp.net/ajaxlibrary/act_modalpopup.ashx ...priceless

【参考方案1】：

hmmm...我非常确定有一个 MPE 的显示事件...这不是我的想法，但我认为您可以将事件处理程序添加到page_load 上显示的事件

function pageLoad()

    var popup = $find('ModalPopupClientID');
    popup.add_shown(SetFocus);


function SetFocus()

    $get('TriggerClientId').focus();

我不确定这是否会帮助您从服务器端调用它

【讨论】：

add_shown() 为我节省了很多精力，而且效果很好！！

太棒了！我还必须将Sys.Application.add_load(pageLoad); 添加到我的页面以使其触发pageLoad()

只是为了添加到@Jorin：我通过运行时添加了我的 javascript，并且 add_shown 在完成部分回发（使用更新面板）时可以工作，但是，在完成完整回发时不会（由于动态控制触发了 MPE 的显示）。添加 Sys.Application.add_load(pageLoad);就在我的 javascript 使它在整页回发上工作之前的行。

您可能还需要在显示的处理程序中进行一些超时，似乎弹出扩展程序本身的一些初始化发生在超时中。我需要它来进行一些适当的尺寸计算。

【参考方案2】：

这是在标记中执行此操作的简单方法：

<ajaxToolkit:ModalPopupExtender 
    ID="ModalPopupExtender2" runat="server" 
    TargetControlID="lnk_OpenGame" 
    PopupControlID="Panel1" 
    BehaviorID="SilverPracticeBehaviorID"  >
    <Animations>
        <OnShown>
             <ScriptAction Script="InitializeGame();" />  
        </OnShown>
    </Animations>                
</ajaxToolkit:ModalPopupExtender>

【讨论】：

我收到以下错误：“TargetControlID="hiddenButtonPopup1 上的动画"使用不存在或无法设置的属性 AjaxControlToolkit.ModalPopupExtender.OnShown”。 hiddenButtonPopup1 是分配给 TargetControlID 的隐藏按钮。

非常适合我，我喜欢仅标记的解决方案，因为我的 JS 也在标记中

【参考方案3】：

您应该使用 ModalPopupExtender 的 BehaviorID 值 mpeBID。

function pageLoad() 
    $find('mpeBID').add_shown(HideMediaPlayer);


function HideMediaPlayer() 
    var divMovie = $get('<%=divMovie.ClientID%>');
    divMovie.style.display = "none";

【参考方案4】：

如果您使用按钮或超链接或其他东西来触发弹出窗口显示，您是否还可以向触发器的 onClick 事件添加一个额外的处理程序，该处理程序仍应触发模式弹出窗口并同时运行 javascript？

【讨论】：

您可以显示来自客户端 JS 代码的弹出窗口，因此不需要回发。我猜你可以这样运行额外的 JS 代码。

【参考方案5】：

ModalPopupExtender 修改您告诉它为“触发器”元素的按钮/超链接。我在显示弹出窗口之前添加触发器的 onclick 脚本。我希望在显示弹出窗口后触发脚本。

另外，当我从服务器端显示模式时，我仍然会遇到问题。

【参考方案6】：

如果你用 css 隐藏它，TinyMCE 可以在不可见的文本框上工作 (display:none;) 您在 TargetControlID 上创建一个“onclick”事件，用于 init TinyMCE，如果您还使用更新面板

【参考方案7】：

对于两种模态形式：

var launch = false;
var NameObject = '';

function launchModal(ModalPopupExtender) 
    launch = true;
    NameObject = ModalPopupExtender;


function pageLoad() 
    if (launch) 
        var ModalObject = $find(NameObject);
        ModalObject.show();
        ModalObject.add_shown(SetFocus);
                
 

function SetFocus() 
    $get('TriggerClientId').focus();

服务器端：behand

protected void btnNuevo_Click(object sender, EventArgs e)

    //Para recuperar el formulario modal desde el lado del sercidor
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "<script>launchModal('" + ModalPopupExtender_Factura.ID.ToString() + "');</script>", false);

【参考方案8】：

var launch = false;

function launchModal() 
    launch = true;


function pageLoad() 
    if (launch) 
          var ModalPedimento = $find('ModalPopupExtender_Pedimento');
          ModalPedimento.show();
          ModalPedimento.add_shown(SetFocus);
    


function SetFocus() 
    $get('TriggerClientId').focus();

【讨论】：

这比上面之前接受的答案好多少？