html - javascript ok exit button

I am pretty new to web programming, but still trying to develop a website. I am using HTML and JavaScript to get things done, but I got really stuck. Looking at some examples online, I was able to create an OK/Cancel button. Now I am attempting to create the same type of button using CSS because I don't want to write the same piece of code in every single page. Is it possible to use CSS for this purpose? If so, could someone please show me how to do it?

This is the code I have for the buttons, which, by the way, works just fine:

<html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
        {         
           window.location="";
        }
        else
        {         
           window.location= "";
        }
      </script>
   </body>
</html>

Thank you.

This is the code I have for the buttons, which, by the way, works just fine:

<html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
        {         
           window.location="http://google.";
        }
        else
        {         
           window.location= "http://www.myWebPage.";
        }
      </script>
   </body>
</html>

Thank you.

Share Improve this question edited Feb 17, 2011 at 0:47 Nikita Rybak 68k22 gold badges162 silver badges183 bronze badges asked Feb 17, 2011 at 0:46 Karl 1112 gold badges4 silver badges7 bronze badges

Add a ment |

6 Answers 6

Sorted by: Reset to default 2

As far as I know you can't do this with css, but you don't need it. You don't have to write the same code on every page using javascript either. You can include an external javascript file in your page like so:

<script type="text/javascript" src="external.js"></script>

Even though you say you don't have much experience you have already discovered the DRY (don't repeat yourself) principle by yourself.

I think you're getting a bit confused to be honest with you, to do this in CSS would be much harder (would involve using a div to hide/show with the options to exit or stay). The simpler way is:

You can create a function in javascript such as:

function closeWindow(){
   if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
   {         
      window.location="http://google.";
   }
      else
   {         
      window.location= "http://www.myWebPage.";
   }
}

and then place this into a .js file, you can then include this file on any page using this and call it on any page you wish, like:

<a href="javasctipt:closeWindow();">Close Window</a>

This can't be done using CSS, but you could put the javascript in an external file (say, confirm.js) then put it at the bottom of every page like so:


<html>
   <body>
     <script type="text/javascript" src="confirm.js"> </script>
   </body>
</html>

Your confirm.js would look like:



if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
{

     window.location="http://google.";
}
else
{

     window.location= "http://www.myWebPage.";
}

You can create a button-styling via css that can be used on multiple pages, that reference that css document. Similarly, you can also place your javascript in an external document and reference that code on multiple pages.

Create a script called "exit.js" with the code between the tags, then just refer to that script using <script type="text/javascript" src="/exit.js"> </script> in all your pages.

You can't make the browser do an alert/confirm with CSS.

A tip: If you only have one line of code for the if/else block you don't need the {}

    <html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))       
           window.location="http://google.";
        else     
           window.location= "http://www.myWebPage.";
      </script>
   </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - javascript ok exit button - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)