Javascript jquery弹出框的关闭按钮

我使用这个弹出框代码，它的工作良好

   $(document).ready(function() {

  // Here we will write a function when link click under class popup                   
   $('a.popup').click(function() {


 // Here we will describe a variable popupid which gets the
  // rel attribute from the clicked link                            
   var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
 // Suppose the rel attribute of click link is popuprel then here in below code
  // #popuprel will fadein
$('#' + popupid).fadeIn();


  // append div with id fade into the bottom of body tag
 // and we allready styled it in our step 2 : CSS
   $('body').append('<div id="fade"></div>');
   $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();


    // Now here we need to have our popup box in center of 
   // webpage when its fadein. so we add 10px to height and width 
     var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
    var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


   // Then using .css function style our popup box for center allignment
     $('#' + popupid).css({
  'margin-top' : -popuptopmargin,
    'margin-left' : -popupleftmargin
     });
    });


     // Now define one more function which is used to fadeout the 
     // fade layer and popup window as soon as we click on fade layer
      $('#fade').click(function() {


     // Add markup ids of all custom popup box here                           
        $('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
     return false;
     });
      });

$（文档）.ready（函数（）{
//在这里，我们将编写一个函数，在类弹出窗口下单击链接
$（'a.popup'）。单击（函数（）{
//这里我们将描述一个变量popupid，它获取
//单击的链接中的rel属性
var popupid=$（this.attr（'rel'）；
//现在我们需要弹出属于rel属性的标记
//假设click-link的rel属性是popuprel，那么下面的代码就是这样的
//#波普普雷尔将褪色
$（'#'+popupid）.fadeIn（）；
//将id为fade的div追加到body标记的底部
//我们在步骤2:CSS中对其进行了样式化
$（'body'）。追加（''）；
$（'#fade'）.css（{'filter'：'alpha（不透明度=80）}）.fadeIn（）；
//现在我们需要把弹出框放在
//当网页消失时，我们增加了10px的高度和宽度
var popuppmargin=（$（'#'+popupid）.height（）+10）/2；
var popupleftmargin=（$（'#'+popupid）.width（）+10）/2；
//然后使用.css函数样式我们的中心对齐弹出框
$（'#'+popupid）.css({
“页边空白处”：Popuptpmargin，
“左边距”：-popupleftmargin
});
});
//现在再定义一个用于淡出的函数
//淡入淡出层和弹出窗口，只要我们点击淡入层
$（'#淡入'）。单击（函数（）{
//在此处添加所有自定义弹出框的标记ID
$（“#淡入，#波普雷尔，#波普雷尔2，#波普雷尔3'）。淡出（）
返回false；
});
});

这是我的HTML代码：

<div class="popupbox" id="popuprel">
     <div id="intabdiv">
          <h2>Content Demo 1</h2>
               <p>Check out WebDesignersDesk for more tutorials</p> 

      </div>
  </div>
<div id="fade"></div>

内容演示1
查看WebDesignerDesk了解更多教程

但是我的弹出框只有在单击弹出框外部时才会关闭，但我想在我的框中添加一个关闭按钮，然后单击它关闭我的框。怎么做呢？

试试这个

HTML:

---

谢谢，这是工作，但当我的弹出文本很短时，它不工作，也不关闭。如果您只使用onde弹出窗口，您只需执行$（“#popuprel”）.fadeOut（）；而不是$（this.parent（）.fadeOut（）；我刚刚更新了答案，使用class属性而不是id；在JSFIDLE中没有工作，所以您可以看到…没有css，但您可以看到它工作并更改您需要的内容。。。

<div class="popupbox" id="popuprel">
     <div id="intabdiv">
          <h2>Content Demo 1</h2>
               <p>Check out WebDesignersDesk for more tutorials</p> 

      </div>
      <div class="closepopup">Close</div>
</div>
<div id="fade" class="fade"></div>

$('.closepopup').on('click', function(e) {
    $('.popupbox').fadeOut();
    $('.fade').fadeOut();
});