ModalPopupExtender on Chrome is not behaving properly.

Last post 11-27-2009 5:15 AM by Helo. 21 replies.

Sort Posts:

  • ModalPopupExtender on Chrome is not behaving properly.

    12-31-2008, 2:46 PM
    • Member
      6 point Member
    • r_gambol
    • Member since 09-02-2008, 7:39 PM
    • Posts 22
    Hi all,

    I'm trying to make use of the ModalPopupExtender to work for IE, Opera, and Chrome.  Everything looks fine in IE and Opera, but not in Chrome.  The behaviour is very inconsistent, where when I invoke the popup, the entire page (including the popup) is disabled.  For the other browsers, it works fine where everything (but the popup) is correctly disabled.  When I say "disabled", I mean that all elements are semi-opaque, and not clickable.

    Sometimes it works when I clear all browsing history on Chrome, and restart the browser.  The rare times when it does work, going back to the page and trying again will not work.

    I'm guessing I have to perform some action when closing the pop-up?  I'm guessing it might have something to do with the bolded line below, maybe I'm not resetting something back to normal?  But then again, I am constantly clearing my browsing data, and still no luck.  Thanks for any info in advance!

    Here's the relevent code (which is very similar to Matt Berseth's YUI dialog:)... I also stripped off all CSS for simplicity.

    <asp:Button ID="btnTrigger" runat="server" Text="Show Popup" />
    <ajaxToolkit:ModalPopupExtender runat="server"
    BehaviorID="popup"
    TargetControlID="btnTrigger" PopupControlID="pnlPopup"
    OkControlID="btnOk" /> <asp:Panel ID="pnlPopup" runat="server" CssClass="modalpopup" style="display:none">
    <div> <asp:Label runat="server" Text="Do you want to continue?" /> </div>
    <div> <asp:Button ID="btnOk" runat="server" Text="Yes" Width="40px" /> <asp:Button ID="btnCancel" runat="server" Text="No" Width="40px" OnClientClick="$find('popup').hide(); return false;" /> </div>



    </asp:Panel>


  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 2:12 AM

    Hi,

    Google Chrome beta is just published.

    AjaxControlToolkit doesn't support this new browser so far, because the JavaScript engine of each browser is different so that the new JavaScript engine isn't accepted by AjaxControlToolkit. Even though it uses the same kernel as Safari, the JavaScript engines of them are slightly different all the same.

     


    Vince Xu
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 12:48 PM
    • Member
      6 point Member
    • r_gambol
    • Member since 09-02-2008, 7:39 PM
    • Posts 22

    Hi Vince,

    Ah, thanks for the response!  I knew that Chrome has a different JavaScript engine, but didn't know it wasn't accepted by the AjaxControlToolkit.

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 12:55 PM
    • Star
      10,558 point Star
    • Danny117
    • Member since 12-16-2008, 2:30 PM
    • Royal Oak Michigan USA
    • Posts 1,837

    I would say it the onclientclick.  Youre trying to hide the popup extender?

     

    Good Luck



  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 1:12 PM
    • Member
      6 point Member
    • r_gambol
    • Member since 09-02-2008, 7:39 PM
    • Posts 22

    I can't consistently SHOW the popup on Chrome.  Invoking the popup makes the entire page disabled, including the popup.

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 1:25 PM
    • Star
      10,558 point Star
    • Danny117
    • Member since 12-16-2008, 2:30 PM
    • Royal Oak Michigan USA
    • Posts 1,837

    $find('whateveritwas').set_enabled ='false';   // something like that I know you can do it.  One mistake in chrome and the whole page might be busted.

    Good Luck



  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 2:21 PM
    • Member
      6 point Member
    • r_gambol
    • Member since 09-02-2008, 7:39 PM
    • Posts 22

    Gave it a shot, but still no luck unfortunately.

    I even tried putting in:  

     
    OnClientClick = "$find('popup').set_enabled ='true';"
     

      as an attribute on the button that invokes the pop-up, and still a no-go in Chrome.  I"m still going to continue to play around with this though.

    Thanks for the suggestion!

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 2:42 PM
    • Star
      10,558 point Star
    • Danny117
    • Member since 12-16-2008, 2:30 PM
    • Royal Oak Michigan USA
    • Posts 1,837

    $get('whatbringsupthepopup').style.display='none';

    Good Luck



  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 3:27 PM
    • Star
      10,558 point Star
    • Danny117
    • Member since 12-16-2008, 2:30 PM
    • Royal Oak Michigan USA
    • Posts 1,837

    right out of the source for the popup the only thing it checks is wether the element is disabled before showing the popup.  That works in crome if you've got a button you can disable it.  It wouldn't be too hard to add an enabled property to the modal popup but to get it tested and into the toolkit would take me a very long time. 


        _onShow : function(e) {
            /// <summary>
            /// Handler for the target's click event
            /// </summary>
            /// <param name="e" type="Sys.UI.DomEvent">
            /// Event info
            /// </param>

            if (!this.get_element().disabled) {
                this.show();
                e.preventDefault();
                return false;
            }
        },

    Good Luck



  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-02-2009, 4:46 PM
    • Star
      10,558 point Star
    • Danny117
    • Member since 12-16-2008, 2:30 PM
    • Royal Oak Michigan USA
    • Posts 1,837

    I hacked one into the code for ModalPopupBehavior.js just to show how easy it is to dig right into the toolkit and add what ever you want to it.  Don't try this on production.  just so I could have an ShowIt DontShowIt functions to turn it on and off at will.

    I use these to scripts to turn the modalpopup on and off. 

    <script type="text/javascript">
        function dan1(x) {
            var j = $find('Button1_ModalPopupExtender');
            j.DontShowIt();  // j.ShowIt() to turn it back on...
        }
        function dan2(x) {
            var j = $find('Button1_ModalPopupExtender');
            j.ShowIt();  // j.ShowIt() to turn it back on...
        }
    </script>

    I moded up the ModalPopupBehavior.js and put it int the root folder of my website.

     

      // Properties
        this._DontShow = null;  // dont show property add in the properties section

    //added this code right about the _onShow function.
        get_DontShow: function() {
            if (this._DontShow == null) {
                return true;
            }
            else {
                return this._DontShow;
            }
        },
        DontShowIt: function() {
            this._DontShow = false;
        },
        ShowIt: function() {
            this._DontShow = true;
        },

    //changed this code...
        _onShow: function(e) {
            /// <summary>
            /// Handler for the target's click event
            /// </summary>
            /// <param name="e" type="Sys.UI.DomEvent">
            /// Event info
            /// </param>

            if (!this.get_element().disabled  && this.get_DontShow()) {
                this.show();
                e.preventDefault();
                return false;
            }
        },

    Then I force the modalpopup extender to use the script.

          <cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server"
      PopupControlID="Panel1"  BackgroundCssClass="modalBackground"
       OkControlID="ok" CancelControlID="cancel"
       OnCancelScript="dan1(this);" ScriptPath="ModalPopupBehavior.js"
                 DynamicServicePath="" Enabled="True" TargetControlID="Button1">
      
            </cc1:ModalPopupExtender>

    Have fun with your ajax control tool kit I do.

     

    Good Luck



  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-05-2009, 9:17 AM
    • Member
      6 point Member
    • r_gambol
    • Member since 09-02-2008, 7:39 PM
    • Posts 22

    Danny, I want to thank you for providing me a new insight on how to look into the source code and analyze the code there.  I really appreciate the time you took!

    I'm going to continue to tackle this.  Thanks again.

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-05-2009, 9:02 PM
    • Member
      16 point Member
    • maverick2129
    • Member since 01-06-2009, 1:58 AM
    • Posts 3

    hey did u get it workin in chrome? am too having same problem.i have modalpopup which i show on button click it works every where but in chrome when in hit first time then it popup appears but everything is greyed out and if i hit refresh and try then it starts working.

    thanks.

     

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-05-2009, 11:54 PM
    Answer
    • Member
      16 point Member
    • maverick2129
    • Member since 01-06-2009, 1:58 AM
    • Posts 3

    hey got the problem

    was using the backgroundcss property for modal popup and it was causing the problem. removed the background css property and it worked well in chrome. for now it solves my problem.

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-06-2009, 9:34 AM
    • Member
      6 point Member
    • r_gambol
    • Member since 09-02-2008, 7:39 PM
    • Posts 22

    Hi maverick,

    I tried your suggestion of removing any background css, but still no luck :(
    I even removed ALL css, and I still can't it to show up on Chrome.

  • Re: ModalPopupExtender on Chrome is not behaving properly.

    01-10-2009, 4:56 PM
    • Member
      16 point Member
    • maverick2129
    • Member since 01-06-2009, 1:58 AM
    • Posts 3

    hey sorry for not updating.

    change loadscriptsbeforui = true in scripmanager.(note it has performance,seo impact) in my case page was 1 of the transaction page.

    i happend to to do following things at same time  (removed css prop of modal, change vs browse with to chrome) 

    and it started workin which lead me to think that it was css prob but then i put back the css and it continued to work which led to conclusion that

    since i was starting my site in ie and then after reaching the page having modalpopp i used to copy the url from ie and paste in chrome and this caused it to not work (entire page looks disabled)

    but when i browsed the site from begining in chrome then problem went away
    hope it helps.

     thanks.

     

Page 1 of 2 (22 items) 1 2 Next >