Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 321
  • Last Modified:

Javascript: Custom Alert Slayer Code Doubt.

Hi EE,
I implemented the code present in this link:
http://slayeroffice.com/code/custom_alert/
But instead of displaying an alert box, I got the following message below my web form:

Oops!
This is a custom alert dialog that was created by over-riding the window.alert method.

Ok

Could you please let me know what has to be done.
Thanks,
Regards
DreamCHaser
0
dreamchaser23
Asked:
dreamchaser23
  • 6
  • 6
2 Solutions
 
dreamchaser23Author Commented:
I just get the message below my web page just like regular text.
I think this could happen because of div tag.
Please throw some light on this issue.
Many thanks.
Regards
DreamChaser
0
 
gops1Commented:
Add this CSS

            #modalContainer {
                  background-color:transparent;
                  position:absolute;
                  width:100%;
                  height:100%;
                  top:0px;
                  left:0px;
                  z-index:10000;
                  background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
            }

            #alertBox {
                  position:relative;
                  width:300px;
                  min-height:100px;
                  margin-top:50px;
                  border:2px solid #000;
                  background-color:#F2F5F6;
                  background-image:url(alert.png);
                  background-repeat:no-repeat;
                  background-position:20px 30px;
            }

            #modalContainer > #alertBox {
                  position:fixed;
            }

            #alertBox h1 {
                  margin:0;
                  font:bold 0.9em verdana,arial;
                  background-color:#78919B;
                  color:#FFF;
                  border-bottom:1px solid #000;
                  padding:2px 0 2px 5px;
            }

            #alertBox p {
                  font:0.7em verdana,arial;
                  height:50px;
                  padding-left:5px;
                  margin-left:55px;
            }

            #alertBox #closeBtn {
                  display:block;
                  position:relative;
                  margin:5px auto;
                  padding:3px;
                  border:2px solid #000;
                  width:70px;
                  font:0.7em verdana,arial;
                  text-transform:uppercase;
                  text-align:center;
                  color:#FFF;
                  background-color:#78919B;
                  text-decoration:none;
            }

            /* unrelated styles */

            #mContainer {
                  position:relative;
                  width:600px;
                  margin:auto;
                  padding:5px;
                  border-top:2px solid #000;
                  border-bottom:2px solid #000;
                  font:0.7em verdana,arial;
            }

            h1,h2 {
                  margin:0;
                  padding:4px;
                  font:bold 1.5em verdana;
                  border-bottom:1px solid #000;
            }

            code {
                  font-size:1.2em;
                  color:#069;
            }

            #credits {
                  position:relative;
                  margin:25px auto 0px auto;
                  width:350px;
                  font:0.7em verdana;
                  border-top:1px solid #000;
                  border-bottom:1px solid #000;
                  height:90px;
                  padding-top:4px;
            }

            #credits img {
                  float:left;
                  margin:5px 10px 5px 0px;
                  border:1px solid #000000;
                  width:80px;
                  height:79px;
            }

            .important {
                  background-color:#F5FCC8;
                  padding:2px;
            }

            code span {
                  color:green;
            }
0
 
gops1Commented:
Also the DTD looks like it is more compatible with strict DTD. Add this line to you HTML file


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dreamchaser23Author Commented:
wow gops1
Awesome mate..
It works!! It works!
Thank you so much.
One last question.
How do I add my custom icon on the alert message?
Thank you once again.
Excellent Soln. :)

0
 
dreamchaser23Author Commented:
Hi Gops1
I just added the .png file to my Images folder and made the css point to it.
Like this:
background-image:url(images/alert.png);
Am I right? If not, please let me know..
Thanks again!
0
 
gops1Commented:
yes you are right.
0
 
gops1Commented:
Let me know if you have any other issues
0
 
dreamchaser23Author Commented:
Hi Gops1
Could you please let me know why you suggested strict DTD.
Thanks in advance,
Regards
DreamChaser
0
 
dreamchaser23Author Commented:
Hi Gops1
I am not sure if I can ask you but I am facing duplicate entries to the database when I click on Refresh key.
I asked the question here:
http://www.experts-exchange.com/Programming/Languages/C_Sharp/Q_22704631.html
Please let me know what I need to do in order to prevent this from happening.

Thanks a lot once again for your help.
Regards
DreamChaser
0
 
gops1Commented:
Thanks for th points dream. I will look into your other question
0
 
dreamchaser23Author Commented:
You are very welcome, gops1.
The points were well deserved to you. :)
If you get a chance (& time) , could you please have a look at this issue:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22701547.html
You are a wiz in Js, please help me out in this pblm.
If I am not clear in that question, please let me know.
Thank you so much.
Regards
DreamChaser
0
 
gops1Commented:
I would try, please respond to my q
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now