Customize alert box and automatically destroy

hi guys

I am using ext-js 4.2 , html , javascript and css

I have a requirment where i want to show 'Loading...' text until my ext-all.js library loads.
It takes 7 seconds for the ext-all library to load, so i dont want the user to see blank screen for 7 seconds.
so i want to display a simple alert message with text 'Loading..'

This is my code, I have two questions, question1 and question 2.

<html>  
<head>
 
<title>CustomerMercantile</title>
<link rel="stylesheet" href="resources/style.css">  

<script type="text/javascript">
alert('Loading...');   //Question1 : I want to center align the alert box, right now it displays on top of the window
</script>

<script type="text/javascript" src="extjs/ext-all.js"></script>  //this takes 7 seconds to load 

<script type="text/javascript">
Ext.onReady(function () {
debugger;
//Question2 :i want to close the alert box here. how do i automatically close/destroy the alert window?
var loadmask = new Ext.LoadMask(Ext.getBody(), {
	msg: "Loading..."
 });
loadmask.show();
});	 

Open in new window



Thanks in advance.
Jay
royjaydAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Question 1 and 2 are related - you can't play with the alert box.

Rather create your own popup div displaying your message and then hiding it again.

Post if you need an example on how to do this.
0
royjaydAuthor Commented:
yes, please can you provide an example.
thanks.
0
Julian HansenCommented:
Here you go - put your scripts where indicated.
<!doctype html>
<html>
<head>
<title>Test</title>
<!-- Optional theme -->
<style type="text/css">
#overlay {
  background: rgba(0,0,0,.5);
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
#overlay div {
  background: #fff;
  box-sizing: border-box;
  color: #333;
  left: 40%;
  line-height: 20px;
  margin: -30px auto 0 auto;
  padding: 20px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 20%;
}
</style>
</head>
<body>
<div id="overlay">
  <div>Loading...</div>
</div>
<p> The rest of the page goes here</p>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- PUT YOUR ext-js SCRIPTS HERE -->
<script type="text/javascript">
$(function() {
  $('#overlay').remove();
});
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Another option with a spinner - copy spinner.gif (or own preference) to same folder as script - or modify CSS to point to new image
<!doctype html>
<html>
<head>
<title>Test</title>
<!-- Optional theme -->
<style type="text/css">
#overlay {
  background: rgba(0,0,0,.5) url(spinner.gif) no-repeat center center;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
</style>
</head>
<body>
<div id="overlay">
</div>
<p> The rest of the page goes here</p>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#overlay').remove();
});
</script>
</body>
</html>

Open in new window

spinner.gif
0
royjaydAuthor Commented:
thanks, can you please tell me if
$('#overlay').remove();
is a javascript code or jquery code?
Can i destroy the div instead of remove ?

Thanks for your help.
0
royjaydAuthor Commented:
hi
i got it working. One question about the spinner. Can i embed the spiner inside the same DIV on the top of the Loading.. message?
Right now it comes in the background.

Thanks
0
Julian HansenCommented:
.remove() removes the element from the DOM and destroys it.

Regarding the spinner question - it was intended to be in place of the loading - the benefit of having it part of the background is that you can use the background-position to center it. However, you can place it wherever it suites you.

If you want it to be an in page element you can do that - seems a bit unnecessary but if that is what your project needs - go for it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.