JS移动端点击弹出遮罩层

JS移动端点击弹出遮罩层

<div style="height:1000px;" οnclick="popup_on();">
<font class="tanchu">点击弹出遮罩层</font>

</div>

<div class="popup_main" id="popup_main" style="display:none;">
  <div class="popup_close" οnclick="popup_close();">×</div>
  <div class="popup_contain">
    <h2>弹出遮罩层</h2>
    <p>弹出遮罩层1</p>
    <p>弹出遮罩层2</p>
    <p>弹出遮罩层3</p>
    <p>弹出遮罩层4</p>
    <p>弹出遮罩层5</p>
    <p>弹出遮罩层6</p>
    <p>弹出遮罩层7</p>
    <p>弹出遮罩层8</p>
    <p>弹出遮罩层9</p>
    <p>弹出遮罩层10</p>
    <p>弹出遮罩层11</p>
    <p>弹出遮罩层12</p>
    <p>弹出遮罩层13</p>
    <p>弹出遮罩层14</p>
    <p>弹出遮罩层15</p>
    <p>弹出遮罩层16</p>
    <p>弹出遮罩层17</p>
    <p>弹出遮罩层18</p>
    <p>弹出遮罩层19</p>
    <p>弹出遮罩层20</p>
    <p>弹出遮罩层21</p>
    <p>弹出遮罩层22</p>
  </div>
</div>

<script>
function popup_on(){
document.getElementById("popup_main").style.display="block";
}

function popup_close(){
document.getElementById("popup_main").style.display="none";
}
</script>