Set width of javascript popup box

Question

Possible Duplicate:
How to break line in Javascript

I'm using the below javascript to display a popup message on page load for a clients website. I am a real novice at js and can only really copy/paste examples I find on the net. Need to know how I can set the width of the popup box. I would like the text to run over two lines, not just span the width of the page. Here is an example of how it appears 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>

You can manually insert a line break `\n`: `alert("our retail shop front\nwill be closed...");` — Michael Berkowski, Dec 18 '12 at 00:33
If you must use an alert, that is a good approach. But you cannot style it, nor the text. A div can be much fancier and have the exact functionality. — Travis J, Dec 18 '12 at 00:33
Better actually: http://stackoverflow.com/questions/591130/can-i-add-a-br-and-links-to-a-javascript-alert — Michael Berkowski, Dec 18 '12 at 00:35

score 1 · Answer 1 · answered Dec 18 '12 at 00:58

I would do it with a bit of CSS (style it to your own liking) and a line of 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>

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

score 1 · Answer 2 · edited May 23 '17 at 11:56

Well for starters you can't really edit the alert box's width. See here for a similar question about this:

how to change the style of alert box

Sure you can do some hackish things like \n but that still doesn't give you the customization you COULD have. I would highly suggest making your own alertbox using a div that you style on your own and write the javascript manually so it pops up like an alert. Take a look @Gaby aka G. Petrioli answer below. He has a very good example. You can also try using some APIs that do it for you.

jQuery dialog is one of many but to give you a sense of how it works (since it seems you are new) jQuery does most of the work for you -- all you really have to do is src their javascript file into your code and then call on it accordingly. You can check out some of the functions they provide for you here. Specifically I linked you to the minWidth section because I believe that is something you are looking for.

If you have questions on how to use jQuery or get confused, feel free to comment here. We like to see people trying to code on Stackoverflow so don't be shy to ask questions (just make sure you are asking good ones and researching before you post). We were all novices once -- the way we become experts is through application and experimentation.

score 0 · Accepted Answer · answered Dec 18 '12 at 00:38

0

If you wish to wrap the text onto two lines I recommend adding the \n newline character in the desired location in your text:

alert("Hello\nWorld")

answered Dec 18 '12 at 00:38

Tim Booker

2,801
1
25
36

Thanks to everyone for your input. This \n worked a treat and was exactly what I was after. I had previously tried
which didn't work of course - but as I said, I don't know much about javascript at all! – user1911463 Dec 18 '12 at 01:20

Set width of javascript popup box

3 Answers3

Linked