设置javascript弹出框的宽度

时间:2012-12-18 00:30:19

标签: javascript popup width

  

可能重复:
  How to break line in Javascript

我正在使用以下javascript在客户网站上显示页面加载时的弹出消息。我是js的真正新手,只能真正复制/粘贴我在网上找到的例子。需要知道如何设置弹出框的宽度。我希望文本可以运行两行,而不仅仅是跨越页面的宽度。以下是www.manageourwebsite.com.au

的示例
<body onload="WelcomeMSG()">
    <script language="JavaScript">

<!--
function WelcomeMSG () 
{
alert("Our Retail shop front will be closed from Friday 21st December 2012 thru to Monday 21st January 2013. The Online store will be open 24/7 as usual  with all online orders being processed as normal.")

}

 -->
    </script>

3 个答案:

答案 0 :(得分:1)

我会用一点CSS(根据你自己喜欢的方式设置)和一行javascript来实现它

<style type="text/css">
    #holiday-overlay{
        position:fixed;
        top:0; left:0; right:0; bottom:0;
        background: rgba(255,255,255,0.7);
        z-index:9999;
    }
    #holiday-message{
        width:400px;
        padding:30px;
        background-color: black;
        left:50%;
        top:40%;
        margin-left:-200px; /*half of width*/
        border-radius:5px;
        color:white;
        position:relative;
    }
    #holiday-close{
       paddding:5px;
       position:absolute;
       right:10px;
       top:10px;
       cursor:pointer;
       font-weight:bold;
       color:white;
    }
</style>
<div id="holiday-overlay">
    <div id="holiday-message">
        <a onclick="var el = document.getElementById('holiday-overlay'); el.parentNode.removeChild(el)" id="holiday-close">&times;</a>
        Our Retail shop front will be closed from Friday 21st December 2012 thru to Monday 21st January 2013.<br/>
        The Online store will be open 24/7 as usual  with all online orders being processed as normal.
    </div>
</div>

http://jsfiddle.net/gaby/NgvCj/embedded/result/

演示

答案 1 :(得分:1)

对于初学者来说,你无法真正编辑alert框的宽度。请看这里有关此的类似问题:

how to change the style of alert box

当然,你可以做一些像\n这样的hackish,但是仍然没有给你你可以定制的定制。我强烈建议您使用自己设置的div制作自己的警报框并手动编写javascript,以便它像警报一样弹出。 看看@Gaby aka G. Petrioli的回答如下。他有一个很好的例子。你也可以尝试使用一些为你做的API。

jQuery dialog是其中之一,但为了让你了解它是如何工作的(因为它似乎你是新手)jQuery为你做了大部分的工作 - 你真正需要做的就是{{1将他们的javascript文件放入您的代码中,然后相应地调用它。您可以查看他们为您提供的一些功能here。具体来说,我将你链接到minWidth部分,因为我相信这是你正在寻找的东西。

如果您对如何使用jQuery有疑问或感到困惑,请随时在此处发表评论。我们希望看到人们尝试在Stackoverflow上编码,所以不要害羞地提出问题(只是确保你在发帖前要求好的和研究)。我们都是新手 - 我们成为专家的方式是通过应用和实验。

答案 2 :(得分:0)

如果您希望将文本换行到两行,我建议在文本中的所需位置添加\ n换行符:

alert("Hello\nWorld")