设置javascript弹出框的宽度[重复]答案

【问题标题】：Set width of javascript popup box [duplicate]设置javascript弹出框的宽度[重复]
【发布时间】：2012-12-05 03:53:33
【问题描述】：

可能重复：
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>

【问题讨论】：

可以手动插入换行符\n:alert("our retail shop front\nwill be closed...");
如果您必须使用警报，这是一个好方法。但是你不能设置它的样式，也不能设置文本。一个 div 可以更漂亮并且具有确切的功能。
实际上更好：stackoverflow.com/questions/591130/…
谢谢迈克尔。正是我在 \n 之后的样子 :)

标签： javascript popup width

【解决方案1】：

对于初学者来说，您不能真正编辑alert 框的宽度。有关此问题的类似问题，请参见此处：

how to change the style of alert box

当然，您可以做一些像\n 这样的骇人听闻的事情，但这仍然无法为您提供您可以拥有的自定义功能。我强烈建议您使用div 制作您自己的警报框，您可以自己设置样式并手动编写javascript，这样它就会像警报一样弹出。 看看下面@Gaby aka G. Petrioli 的回答。他有一个很好的例子。你也可以尝试使用一些 API 来为你做这件事。

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

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

【讨论】：

【解决方案2】：

我会用一点 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/的演示

【讨论】：

【解决方案3】：

如果您希望将文本换行成两行，我建议您在文本的所需位置添加 \n 换行符：

alert("Hello\nWorld")

【讨论】：

感谢大家的意见。这 \n 奏效了，这正是我所追求的。我之前尝试过
当然没有用 - 但正如我所说，我对 javascript 知之甚少！