Question

I’m looking to replace the generic JavaScript alert pop-up box with a fancy box…
Here is the code that I currently have:

<script type="text/javascript">

        $(document).ready(function() {
            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });

        });
    </script>

Below is the JavaScript used for the alert…

    <script language="Javascript1.2">
<!--
var message = "Print this Page";

function printpage() {
window.print();  
}
function validateForm()
{
var x=document.forms["zipform"]["Zip"].value;
if (x>97999)
  {
  alert("#inline1");
  return false;
  }
}
//-->
</script>

Below is the form section I’m using…

<form name="zipform" onsubmit="return validateForm()" language="JavaScript" method="POST" action="#">
              Enter Your Zip Code <input type="text" name="Zip" size="5" maxlength="5">
              <input type="submit" value="Start">
            </form>

Below is the div I’d like to display on the site…

<div id="content">
  <p><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></p>
    <div style="display: none;">
        <div id="inline1" style="width:400px;height:100px;overflow:auto; ">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque.</div></div></div>

I’ve found this link Show content with fancybox like a Javascript Alert but it really doesn’t answer the question I have. I do not want a clickable link; I want the div fancybox to pop up when there is a JavaScript alert.

Answer 1

I think that the window attached to the alert can’t be modified since is a system object, and therefore CSS can’t do anything there.

So my best bet would be that you would create an HTML element that would mock the alert window, and style it however you want… I, for example, usually go for this: http://jqueryui.com/demos/dialog/