Javascript：如何使用<div>内容显示弹出窗口

Question

我想在我的页面加载完成后立即显示一个弹出窗口。弹出窗口的内容是由div标签的内容给出的html。这是我的代码：

<div style='display:none; width:500px; height:400px; padding:5px; top:0px; left:400px;' id='popup'>
<div style='float:right'><a id='cchiudi'>Chiudi</a></div>
<br style='clear:both' /><br/>
<center>Per i nuovi clienti offriamo 4h di facchnaggio <strong>GRATUITE</strong>
<BR/><br/>
<a href='http://www.ambientaservizi.it/contact'>
<img src='<?php echo $img_popup; ?>'/>
</a>
<br/><br/>
Per ricevere maggiori informazioni o per prenotare il servizio <br/>cliccare <a href='http://www.ambientaservizi.it/contact'>QUI</a> o cliccare sulla immagine.
</center>

<script>
function popUP(){

//jQuery("#popup").show();
var w = 500;
var h = 400;
//scroll = 'yes';   
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = jQuery("#popup").height();
var popupWidth = jQuery("#popup").width();
//centering
jQuery("#popup").css({
    "top": "", 
    "left": windowWidth/2-popupWidth/2,
});

jQuery("#cchiudi").click(function(){
    jQuery("#popup").hide();
});
window.open(jQuery("#popup").html(), "Avviso", "menubar=no,toolbar=no,status=no, height=500,width=400,top="+TopPosition+",left="+LeftPosition);
}

jQuery(document).ready(function(){
popUP();
});

看起来很简单，但我不知道我错过了什么，因为什么都没有出现。你能帮忙吗？

Answer 1

这就是你要找的东西 的 https://jsfiddle.net/2qmc5xoa/

$（document）.ready（function（）{

  $("button").on('click', function() {
      showPopup();
  });

  $("#maskLayout").on('click', function() {
    hidePopup();
  });

  $("#popup").on('click', function() {
    hidePopup();
  });

  function hidePopup() {

    $("#popup").hide();
    $("#maskLayout").hide();
  }

  function showPopup() {

    $("#popup").show();
    $("#maskLayout").show();
  }
});