jquery - 使用 jquery 弹出内容

Question

我的内容在使用 jquery 单击标题时会向下滑动。但我想打开内容弹出窗口而不是滑动。我试过谷歌但没有成功(因为 jquery 的新手)。

所以我的问题是什么是弹出内容的最佳和最简单的方法(所有/大多数设备和浏览器都应该支持)。

<p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br><img id="bg" src="images/down.png"/> </p>
    <div class="content" style="background-color:#e5f1f7; text-align:justify;">
    <p style="margin-top:0;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
    quis quam rhoncus pretium.

Jsfiddle:https://jsfiddle.net/345hxhx7/

感谢帮助!

Answer 1

我有简单的 jQuery 解决方案。 jsfiddle {{已编辑}}

新的 HTML:

<div class="pop_up" data-status="close"> 
   <div class="pop_overlay"></div>
   <div class="pop_wrapper">
       <div class="pop_title">
            The Title 
            <span class="pop_close">X</span>
       </div>
       <div class="pop_content">
            Popup Content will come here;
       </div>
    </div>
 </div>

jQuery

jQuery(".heading").click(function() {
    var this_item = jQuery(this).attr('data-item');
    var item_cont = jQuery('#'+this_item).html();
    jQuery('.pop_up').fadeIn();
    jQuery('.pop_content').html(item_cont);
    jQuery(".pop_close,.pop_overlay").click(function() {
        jQuery('.pop_up').fadeOut();
    });
});

新的 CSS

.pop_up{
    display:none;
}
.pop_overlay{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,.2);
    position:fixed;
  }
  .pop_wrapper{
      max-width:450px;
      margin:auto;
      box-shadow:0 0 5px rgba(0,0,0,.5);
      position:relative;
      z-index:9999;
      position:fixed;
      left:0;
      right:0;
      top:100px;
  }
  .pop_wrapper .pop_title{
      padding:10px;
      background:#fafafa;
  }
  .pop_content{
      background:white;
      padding:15px;
  }
  .pop_close{
      float:right;
  }

查看我的 jsfiddle演示。