使用精美的盒子警报替换弹出的JavaScript警报

时间:2012-02-29 16:04:49

标签: javascript forms fancybox alert

我想用一个精美的盒子替换通用的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。

2 个答案:

答案 0 :(得分:1)

我认为附加到警报的窗口无法修改,因为它是系统对象,因此CSS无法在那里做任何事情。

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

答案 1 :(得分:1)

有手动使用 - $.fancybox("#inline1");