3

更新パネル内にモーダル ポップアップ エクステンダーとパネルがあります。CancelControlId とバインドする [閉じる] ボタンがあります。ただし、モーダル/パネルの外側をクリックしてパネルを閉じることができるようにしたいと考えています。（閉じるボタンを使用する代わりに）。

私はいくつかのこととプラグインのクリックアウトサイドを試しました。何も役に立たないようです。どんな助けやアドバイスも大歓迎です。ありがとう。

<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
    <asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
    <asp:UpdatePanel ID="pnlMap" runat="server">
        <ContentTemplate>
            <div>
                <asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
                <ajax:ModalPopupExtender
                    ID="ModalPopupExtender1"
                    runat="server"
                    TargetControlID="btnMap"
                    PopupControlID="panel1"
                    PopupDragHandleControlID="PopupHeader"
                    Drag="true"
                    BackgroundCssClass="ModalPopupBG">
                </ajax:ModalPopupExtender>

                <asp:Panel ID="panel1" runat="server">
                    <div class="popup_large">
                        <asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
                        <asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
                        <br />
                        <asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
                    </div>
                </asp:Panel>

            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

4

4 に答える 4

4

onclick背景に追加してモーダルを閉じる例へのリンクを次に示します。

http://forums.asp.net/t/1528820.aspx

参照用にキー ビットをここにコピーします。

function pageLoad() { 
    var mpe = $find("MPE"); 
    mpe.add_shown(onShown); 
} 
function onShown() { 
    var background = $find("MPE")._backgroundElement; 
    background.onclick = function() { $find("MPE").hide(); } 
} 

<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
    TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
    CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
于 2013-02-01T16:51:46.087 に答える
3

C#

<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />

JavaScript (jQuery を使用)

jQuery('.jsMpeBackground').click(function () {
    var id = jQuery(this).attr('id').replace('_backgroundElement', '');
    $find(id).hide();
});
于 2013-05-12T15:28:50.093 に答える
0

ポップアップにタブセクションやテキストボックスなどの機能的なユーザーコントロールがあるため、実際のポップアップを閉じずにクリックできるように、このようにする必要がありました。

<script type="text/javascript">
    //Hide's Doc Center when clicking outside

    function pageLoad(sender, args) {
        if (!args.get_isPartialLoad()) {
            $addHandler($find("MPE")._backgroundElement, "click", closePopup);
        }
    }

    function closePopup(e) {
        $find("MPE").hide();
    }

    //End
</script>

ここで、実際の ModelPopupExtender の BehaviorID が上記のタグと一致することを確認してください。そのようです：

<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />

基本的に、これはモーダル ポップアップの _backgroundElement 属性の「クリック」イベントを処理し、そのイベントで closePopup() 関数を実行すると思います。

于 2013-12-23T15:39:09.713 に答える