0

I have defined a javascript custom button. As soon as the button is clicked, the page should grey out. In mozilla firefox, the below code works as expected:

    var $j = jQuery.noConflict(); 

    var screen = '<div><div id="screen" style="position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 100; opacity: 0.7; background-color: rgba(150, 150, 150, 0.8); overflow: hidden; background-position: center; background-repeat: no-repeat;"></div></div>'; 

    $j('head').append('<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" type="text/css"/>');


$j('body').append(screen); 
function performAction() {
//some action
}

After this line of code I have called some methods to perform an action on Quote object.

In Chrome and IE, the grey area is visible after performing the action in method. In firefox, the grey area is displayed when I click the button.

Anyone have any idea why Chrome and IE behaviour is diffrent than Mozilla firefox?

How can I make this cosistent in all browsers?

Improve this question
2
  • did you tried installing fire bug saw the console for errors?
    – Avijit Chakraborty
    Commented Jun 15, 2017 at 16:57
  • In Chrome using inspect element I saw one error in Console, which was related to user agent. Error: Refused to set unsafe header "User-Agent"
    – sfdcdev
    Commented Jun 15, 2017 at 17:03

1 Answer 1

Reset to default
0

Depending on what you're doing, the browser may not redraw the screen right away. You can avoid this problem by allowing the browser a chance to catch up, typically using setTimeout:

setTimeout(performAction, 100); // wait 1/10th of a second
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .