Set Width Of Javascript Popup Box

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 ca

Solution 1:

I would do it with a bit of CSS (style it to your own liking) and a line of javascript

<styletype="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><divid="holiday-overlay"><divid="holiday-message"><aonclick="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/

Solution 2:

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.

Solution 3:

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