javascript - 用精美的框警报替换 JavaScript 警报弹出窗口

Question

我想用一个花哨的框替换通用的 JavaScript 警报弹出框...这是我目前拥有的代码:

<script type="text/javascript">

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

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

        });
    </script>

以下是用于警报的 JavaScript...

    <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>

下面是我正在使用的表单部分...

<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>

下面是我想在网站上显示的 div...

<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>

我找到了这个链接 Show content with fancybox like a Javascript Alert但它确实没有回答我的问题。我不想要一个可点击的链接；我希望在出现 JavaScript 警报时弹出 div fancybox。

Answer 1

我认为附加到警报的窗口不能被修改，因为它是一个系统对象，因此 CSS 不能在那里做任何事情。

所以我最好的选择是创建一个 HTML 元素来模拟警报窗口，并根据需要设置样式...例如，我通常这样做:http://jqueryui.com/demos/dialog/