HTML DIVを再利用可能なグローバル関数に変換??たぶんJavascript？

Question

私は自分のサイトで使用しているポップアップを持っており、コードを短くする方法を見つけようとしています。私はVisual Studioの世界で.NETを長年使ってきましたが、コードを短縮するために関数やモジュールを使用するのに慣れていましたが、HTMLでこれをやる方法は100％ではありません。 。たぶん全体をCSS値に変換することさえできますか？

第1変数、第2変数のタイトル、第3変数のテキストに基づいてクラスを変更したいと考えています。

.popupalert { 
 
    width: 75%; 
 
    padding: 15px; 
 
    background-color: #f44336; 
 
    color: white; 
 
    margin: 15px auto 0 auto; 
 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
 
    border-radius: 5px; 
 
    font: 1.5em'Andale Mono', Consolas, 'Courier New'; 
 
} 
 
.popupsuccess { 
 
    width: 75%; 
 
    padding: 15px; 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    margin: 15px auto 0 auto; 
 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
 
    border-radius: 5px; 
 
    font: 1.5em'Andale Mono', Consolas, 'Courier New'; 
 
} 
 
.popupwarning { 
 
    width: 75%; 
 
    padding: 15px; 
 
    background-color: #f47836; 
 
    color: white; 
 
    margin: 15px auto 0 auto; 
 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
 
    border-radius: 5px; 
 
    font: 1.5em'Andale Mono', Consolas, 'Courier New'; 
 
} 
 
.closebtn { 
 
    margin-left: 15px; 
 
    color: white; 
 
    font-weight: bold; 
 
    float: right; 
 
    font-size: 22px; 
 
    line-height: 20px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 
.closebtn:hover { 
 
    color: black; 
 
}

<div class='popupwarning'> 
 
    <span class='closebtn' onclick=\ "this.parentElement.style.display='none';\">&times;</span> 
 
    <strong>NOTICE!</strong> The quota increase is larger than the volume free space. 
 
</div>

私が持っているしたいと思います私はもちろんロードスクリプトを使用して任意のページ（上で実行することができる機能やJavaScriptである：ここでは

は、私が使用しているコードがあります）。私はポップアップ（警告、警告、成功）の3つのレベルがあります。警告レベルとテキスト文字列を渡したいと思います。このように：私が正しく質問を理解していれば

<script> 
 
     popup('warning','NOTICE!','some text to go with alert') 
 
    </script>

Answer 1

、あなたのCSSコードを短縮し、ポップアップHTMLコードを返す関数を作りたいです。まず、CSSコードを減らすことから始めます。あなたのCSSを見ると、を除いて、popupalert、popupsuccess、およびpopupwarningはすべて同じCSSを持っています。ポップアップの基本CSSを持つポップアップクラスを作成して、背景に異なる色のクラスを作成してみませんか？それはそれを少し減らすでしょう。このような何か：

.popup { 
    width: 75%; 
    padding: 15px; 
    color: white; 
    margin: 15px auto 0 auto; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
    border-radius: 5px; 
    font: 1.5em'Andale Mono', Consolas, 'Courier New'; 
} 

次に、あなたがそうのような背景設定子クラス作成することができます。

今

.popup .alert{ 
    background-color: #f44336; 
} 

.popup .success{ 
    background-color: #4CAF50; 
} 

.popup .warning{ 
    background-color: #f47836; 
} 

を、通常、私は、HTMLコードを吐き出すための関数を作成する心配はないだろう、今

function popupGenerator(type, title, body) { 

    // return the html string here. You will have to construct it yourself. 

} 

をあなたが適切なHTMLを吐き出す機能を持っていることを、あなたはちょうどこの時のページLOAのようにそれを使用することができます：あなたはそのような何かが必要な場合は、あなたがこのような何かを行うことができます私はあなたを助けるために少しJSBINを作った

$(document).ready(function() { 

    $("body").append(popupGenerator("warning", "my warning", "do something")); 

}); 

：dsは、誰かがボタンなどに当たります。あなたのフィッティングに微調整をしなければなりませんが、これはあなたにスタートを与えるはずです： http://jsbin.com/xuquwacoju/edit?js,output