Question

我有使用jquery点击标题时向下滑动的内容。但我想打开内容弹出而不是滑动。我试过谷歌但没有成功（因为新的jquery）。

所以我的问题是什么是最好的＆amp;弹出内容的最简单方法（应该在所有/大多数设备和浏览器中支持）。

<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演示。

Answer 2

您可以使用jQuery UI Dialog或Boostrap＆＃39; Modal。

Answer 3

查看jPopup：https://github.com/seahorsepip/jPopup

支持所有浏览器（即7 +）并且移动友好，无论您想要什么，都有一个选项。即使在弹出窗口打开后，也可以更改位置，更改设置和内容。

用jquery弹出内容

3 个答案: