点击弹出 提示文字内容

Question

点击弹出 提示文字内容，现在我有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>

Answer 1

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