0

重複の可能性:
Javascript で改行する方法

以下の JavaScript を使用して、クライアント Web サイトのページ読み込み時にポップアップ メッセージを表示しています。私はjsの初心者で、ネットで見つけた例を実際にコピー/貼り付けすることしかできません。ポップアップ ボックスの幅を設定する方法を知る必要があります。ページの幅だけでなく、テキストを 2 行にまたがって表示したいと考えています。これがどのように表示されるかの例です 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>
4

3 に答える 3

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/のデモ

于 2012-12-18T00:58:00.540 に答える
1

alertまず、ボックスの幅を実際に編集することはできません。これに関する同様の質問については、こちらを参照してください。

アラート ボックスのスタイルを変更する方法

確かに、次のようなハックなことを行うことはできます\nが、それでも、可能なカスタマイズは得られません。div独自のスタイルを使用して独自のアラートボックスを作成し、javascript を手動で記述して、アラートのようにポップアップすることを強くお勧めします。以下の@Gaby別名G.Petrioliの回答をご覧ください。彼は非常に良い例を持っています。また、それを行ういくつかの API を試してみることもできます。

jQuery ダイアログは数あるダイアログの 1 つですが、それがどのように機能するかを理解してもらうために (初心者のように思われるため)、ほとんどの作業は jQuery が行います。実際に行う必要があるのはsrc、JavaScript ファイルをコードに挿入して呼び出すことだけです。それに応じて。ここで提供されている機能の一部を確認できます。具体的には、あなたが探しているものだと思うので、minWidth セクションにリンクしました。

jQuery の使用方法について質問がある場合や混乱する場合は、お気軽にここにコメントしてください。私たちは、Stackoverflow でコードを作成しようとしている人たちを見るのが好きなので、恥ずかしがらずに質問してください (投稿する前に、良い質問をし、調査していることを確認してください)。私たちは皆、かつては初心者でした。専門家になる方法は、応用と実験です。

于 2012-12-18T01:01:03.857 に答える
0

テキストを 2 行に折り返す場合は、テキスト内の目的の場所に \n 改行文字を追加することをお勧めします。

alert("Hello\nWorld")
于 2012-12-18T00:38:02.673 に答える