点击弹出 提示文字内容

点击弹出 提示文字内容，现在我有2个可以这么写，但是我如果有20个的话，JS要怎么写才比较简洁啊，不可能写20 条js代码，如果是200条呢。

 <input type="Submit" class="submit" value="标题aaa" onClick="javascript:showDiv()" />
<input type="Submit" class="submit" value="标题bbb" onClick="javascript:showsDiv()" />


<div id="popaDiv" style="display:none;"><div  class="mydiv"> <a href="javascript:closeDiv()" class="closebtn">×</a><br/><h2>弹出的提示内容aaa</h2></div></div>
<div id="popbDiv"  style="display:none;"><div  class="mydiv"><a href="javascript:closesDiv()" class="closebtn">×</a><br/><h2>弹出的提示内容bbb</h2></div></div>

<script>
function showDiv(){
document.getElementById('popaDiv').style.display='block';
}
function closeDiv(){
document.getElementById('popaDiv').style.display='none';
}
function showsDiv(){
document.getElementById('popbDiv').style.display='block';
}
function closesDiv(){
document.getElementById('popbDiv').style.display='none';
}
</script>

    <input type="Submit" class="submit" value="标题aaa" onClick="javascript:showDiv('popaDiv')" />
    <input type="Submit" class="submit" value="标题bbb" onClick="javascript:showDiv('popbDiv')" />

    <div id="popaDiv" style="display:none;">
        <div class="mydiv">
            <a href="javascript:closeDiv('popaDiv')" class="closebtn">×</a><br/>
            <h2>弹出的提示内容aaa</h2></div>
    </div>
    <div id="popbDiv" style="display:none;">
        <div class="mydiv">
            <a href="javascript:closeDiv('popbDiv')" class="closebtn">×</a><br/>
            <h2>弹出的提示内容bbb</h2></div>
    </div>

    <script>
        function showDiv(id) {
            document.getElementById(id).style.display = 'block';
        }

        function closeDiv(id) {
            document.getElementById(id).style.display = 'none';
        }
    </script>

<div id="submit"></div>
<div id="popaDiv" style="display:none;"><div class="mydiv"><a href="javascript:closeDiv()" class="closebtn">×</a><br/><h2></h2></div></div>
<script src="js/jquery.min.js"></script>
<script>
    var dataArr = ['标题aaa','标题bbb'];
    var dataCon = ['弹出的提示内容aaa','弹出的提示内容bbb'];
    for(var i = 0; i<dataArr.length;i++){
        $("#submit").append('<input type="Submit" class="submit" value="'+dataArr[i]+'" />');
    }
    $('.submit').click(function () {
        $(".mydiv>h2").html(dataCon[$(this).index()]);
        $("#popaDiv").show();
    })
    function closeDiv(){
        $('#popaDiv').hide();
    }
</script> 

<input type="Submit" class="submit" value="标题aaa" onClick="javascript:showDiv('弹出的提示内容aaa')" />
<input type="Submit" class="submit" value="标题bbb" onClick="javascript:showDiv('弹出的提示内容bbb')" />

<!-- 弹出框样式相同的话，这里共用一个就好，只需要修改弹窗的内容就可以 -->
<div id="popaDiv" style="display:none;"><div  class="mydiv"> <a href="javascript:closeDiv()" class="closebtn">×</a><br/><h2 id="popaContent"></h2></div></div>

<script>
function showDiv(_str){
    document.getElementById('popaContent').innerHTML = _str; // 弹窗显示前设置弹窗内容
    document.getElementById('popaDiv').style.display='block';
}
function closeDiv(){
    document.getElementById('popaDiv').style.display='none';
}
</script>