如何在 Bootstrap 的弹出窗口中插入关闭按钮

Posted 2023-02-24

技术标签:

【中文标题】如何在 Bootstrap 的弹出窗口中插入关闭按钮【英文标题】：How to insert close button in popover for Bootstrap 【发布时间】：2012-11-04 23:16:39 【问题描述】：

JS：

$(function()
  $("#example").popover(
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>',
    content : 'test'
  )
  $('html').click(function() 
    $('#close').popover('hide');
  );
);

HTML：

<button type="button" id="example" class="btn btn-primary" ></button>

我写你的代码不显示你的弹出窗口。

有人遇到过这个问题吗？

【问题讨论】：

【参考方案1】：

你需要做正确的标记

<button type="button" id="example" class="btn btn-primary">example</button>

然后，一种方法是将关闭处理程序附加到元素本身内部，以下工作：

$(document).ready(function() 
    $("#example").popover(
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
                '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
        content : 'test'
    );
);

【讨论】：

@Sebf，bootstrap 的目的是尽可能地轻量级，很多问题都需要在实现层上解决。是的，一些“缺失”的部分令人费解；-) @jonschlinkert data-dismiss="popover" 代替 onclick 不起作用。这是一个有据可查的问题。在弹出框标题中使用内联 HTML 和 javascript 事件是一种非常糟糕的做法。它可能会起作用，但以后会让您头疼。 @Mario Fink（和 Robert Kotcher）——完全同意。但这是在 twitter bootstrap 2.x 中实现所需功能的方式，现在预期的方式失败了。我只是回答这个问题。对我来说，上面的例子只能通过用单引号 (') 替换双引号 (") 来工作【参考方案2】：

我需要找到适用于多个弹出框和 Bootstrap 3 的东西。

这就是我所做的：

我有多个元素想要使用弹出框，所以我不想使用 id。

标记可以是：

<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>

弹出框内保存和关闭按钮的内容：

var contentHtml = [
    '<div>',
        '<button class="btn btn-link cancel">Cancel</button>',
        '<button class="btn btn-primary save">Save</button>',
    '</div>'].join('\n');

以及所有 3 个按钮的 javascript：

当容器默认不附加到body时，此方法有效。

$('.foo').popover(
    title: 'Bar',
    html: true,
    content: contentHtml,
    trigger: 'manual'
).on('shown.bs.popover', function () 
    var $popup = $(this);
    $(this).next('.popover').find('button.cancel').click(function (e) 
        $popup.popover('hide');
    );
    $(this).next('.popover').find('button.save').click(function (e) 
        $popup.popover('hide');
    );
);

当容器附加到'body'时

然后，使用 aria- describeby 找到弹出窗口并将其隐藏。

$('.foo').popover(
    title: 'Bar',
    html: true,
    content: contentHtml,
    container: 'body',
    trigger: 'manual'
).on('shown.bs.popover', function (eventShown) 
    var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
    $popup.find('button.cancel').click(function (e) 
        $popup.popover('hide');
    );
    $popup.find('button.save').click(function (e) 
        $popup.popover('hide');
    );
);

【讨论】：

小改进：popup.find('button.cancel').on('click',function(e) ... 当我点击取消链接时，它会关闭弹出窗口。但是我必须在弹出框触发链接上单击两次，因为它不会在第一次单击时打开弹出框。预定义类.close 带有悬停效果，因此在标题或内容中插入关闭按钮就像<span class=close>&times;</span> 一样简单。 @NizamKazi 使用下面的解决方案来解决这个问题：***.com/a/58923567/5376813【参考方案3】：

我发现其他答案要么不够通用，要么太复杂。这是一个应该始终有效的简单方法（对于引导程序 3）：

$('[data-toggle="popover"]').each(function () 
    var button = $(this);
    button.popover().on('shown.bs.popover', function() 
        button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () 
            button.popover('toggle');
        );
    );
);

然后只需在关闭按钮中添加属性data-dismiss="popover"。还要确保不要在代码的其他地方使用popover('hide')，因为它隐藏了弹出窗口，但没有在引导代码中正确设置其内部状态，这将在您下次使用popover('toggle') 时引起问题。

【讨论】：

出于某种原因，使用 Bootstrap 3，.popover('toggle'); 从来没有为我做任何事情，而 .popover('hide'); 确实有效。除此之外，这个解决方案是我最喜欢的。谢谢！那岂不是每次popover-show-event都绑定click事件，导致多次绑定？ @pduersteler 这是旧代码，但它用于生产，所以我很确定它可以工作。我猜引导程序会创建一个新的弹出框，因此每次单击按钮时都会创建一个新的关闭按钮。如果关闭按钮上有多个事件，它会切换多次，我会注意到这个错误（希望如此）。让我知道您是否可以确认问题。再想一想，也许这就是为什么我对popover('hide') 有一个问题，它不会破坏弹出框而只是隐藏它？这应该是现代引导程序中的$(button.data('bs.popover').tip).find('[data-dismiss="popover"]') (>= 4?)【参考方案4】：

前面的例子有两个主要缺点：

“关闭”按钮需要以某种方式了解所引用元素的 ID。需要在“shown.bs.popover”事件上添加一个“点击”监听器到关闭按钮；这也不是一个好的解决方案，因为每次显示“popover”时，您都会添加这样的监听器。

以下是没有这些缺点的解决方案。

默认情况下，'popover' 元素会立即插入到 DOM 中的引用元素之后（然后请注意，引用元素和弹出框是直接同级元素）。因此，当单击“关闭”按钮时，您可以简单地查找其最近的“div.popover”父元素，然后查找该父元素的前一个兄弟元素。

只需在“关闭”按钮的“onclick”处理程序中添加以下代码：

$(this).closest('div.popover').popover('hide');

示例：

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>';

$loginForm.popover(
    placement: 'auto left',
    trigger: 'manual',
    html: true,
    title: 'Alert' + genericCloseBtnHtml,
    content: 'invalid email and/or password'
);

【讨论】：

哇，好简单的解决方案。为我工作。使用 Bootstrap 4.3 我必须将sanitize: false 添加到弹出选项中【参考方案5】：

以下是我刚刚在我的项目中使用的，希望对你有帮助

<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true  data-original-title="weclome to use the sql query" data-content="content">example</a>


$('#manualinputlabel').click(function(e) 
              $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
              $(this).popover();

          );

      $(document).click(function(e) 
         if(e.target.id=="popovercloseid" )
         
              $('#manualinputlabel').popover('hide');                
         

      );

【讨论】：

您好，感谢您的回答！你知道如何在h3.popover-title 对象中垂直居中&times; 符号吗？工作得很好，但我在垂直对齐方面遇到了同样的问题。我用line-height: 0.7 !important; 将我自己的课程添加到关闭按钮，看起来不错当我点击取消链接时，它会关闭弹出框。但是我必须在弹出框触发链接上单击两次，因为它不会在第一次单击时打开弹出框【参考方案6】：

我已经检查了许多提到的代码示例，对我来说，Chris 的方法非常有效。我在此处添加了我的代码，以便对其进行演示。

我已经用 Bootstrap 3.3.1 测试过它，我还没有用旧版本测试过它。但它绝对不适用于 2.x，因为 shown.bs.popover 事件是在 3.x 中引入的。

$(function() 
  
  var createPopover = function (item, title) 
                       
        var $pop = $(item);
        
        $pop.popover(
            placement: 'right',
            title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</a>',
            trigger: 'click',
            html: true,
            content: function () 
                return $('#popup-content').html();
            
        ).on('shown.bs.popover', function(e) 
            //console.log('shown triggered');
            // 'aria-describedby' is the id of the current popover
            var current_popover = '#' + $(e.target).attr('aria-describedby');
            var $cur_pop = $(current_popover);
          
            $cur_pop.find('.close').click(function()
                //console.log('close triggered');
                $pop.popover('hide');
            );
          
            $cur_pop.find('.OK').click(function()
                //console.log('OK triggered');
                $pop.popover('hide');
            );
        );

        return $pop;
    ;

  // create popover
  createPopover('#showPopover', 'Demo popover!');

  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button>

<div id="popup-content" class="hide">
    <p>Simple popover with a close button.</p>
    <button class="btn btn-primary OK">OK</button>
</div>

【讨论】：

我猜应该是$cur_pop.popover('hide');【参考方案7】：

诀窍是通过 .data('bs.popover').tip() 获取当前的 Popover：

$('#my_trigger').popover().on('shown.bs.popover', function() 
    // Define elements
    var current_trigger=$(this);
    var current_popover=current_trigger.data('bs.popover').tip();

    // Activate close button
    current_popover.find('button.close').click(function() 
        current_trigger.popover('hide');
    );
);

【讨论】：

【参考方案8】：

只是想更新答案。根据 Swashata Ghosh，以下是一种适用于 moi 的更简单方法：

HTML：

<button type="button" class="btn btn-primary example">Example</button>

JS：

$('.example').popover(
   title: function() 
      return 'Popup title' +
             '<button class="close">&times</button>';
   ,
   content: 'Popup content',
   trigger: 'hover',
   html: true
);

$('.popover button.close').click(function() 
   $(this).popover('toggle');
);

【讨论】：

【参考方案9】：

这适用于多个弹出框，我还添加了一些额外的 JS 来处理重叠弹出框时发生的 z-index 问题：

http://jsfiddle.net/erik1337/fvE22/

JavaScript：

var $elements = $('.my-popover');
$elements.each(function () 
    var $element = $(this);

    $element.popover(
        html: true,
        placement: 'top',
        container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier
        content: $('#content').html()
    );

    $element.on('shown.bs.popover', function (e) 
        var popover = $element.data('bs.popover');
        if (typeof popover !== "undefined") 
            var $tip = popover.tip();
            zindex = $tip.css('z-index');

            $tip.find('.close').bind('click', function () 
                popover.hide();
            );

            $tip.mouseover(function (e) 
                $tip.css('z-index', function () 
                    return zindex + 1;
                );
            )
                .mouseout(function () 
                $tip.css('z-index', function () 
                    return zindex;
                );
            );
        
    );
);

HTML：

<div class="container-fluid">
    <div class="well popover-demo col-md-12">
        <div class="page-header">
             <h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3>

        </div>
        <div class="btn-group">
            <button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button>
        </div>
    </div>
</div>
<div id="content" class="hidden">
    <button type="button" class="close">&times;</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS：

/* Make the well behave for the demo */
 .popover-demo 
    margin-top: 5em

/* Popover styles */
 .popover .close 
    position:absolute;
    top: 8px;
    right: 10px;

.popover-title 
    padding-right: 30px;

【讨论】：

【参考方案10】：

我一直在努力解决这个问题，这是最简单的方法，3行js：

在弹出框的标题中添加一个叉号使用 js sn-p 显示弹出框并通过单击标题关闭使用一点 css 让它更漂亮

$(document).ready(function() 
  // This is to overwrite the boostrap default and show it allways
  $('#myPopUp').popover('show');
  // This is to destroy the popover when you click the title
  $('.popover-title').click(function()
    $('#myPopUp').popover('destroy');
  );
);

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";

/* Just to align my example */
.btn 
  margin: 90px auto;
  margin-left: 90px;


/* Styles for header */
.popover-title 
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-block;
  float: right;
  text-align: right;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button>

【讨论】：

为什么十字按钮没有通过标签导航？【参考方案11】：

试试这个：

$(function()
  $("#example")
      .popover(
      title : 'tile',
      content : 'test'
    )
    .on('shown', function(e)
      var popover =  $(this).data('popover'),
        $tip = popover.tip();

      var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
        .click(function()
          popover.hide();
        );
      $('.popover-title', $tip).append(close);
    );
);

与其将按钮添加为标记字符串，不如使用 jQuery 包装的按钮更容易，因为这样可以更整齐地绑定。 Bootstrap 代码中确实缺少这一点，但这种解决方法对我有用，如果需要，实际上可以扩展以适用于所有弹出框。

【讨论】：

最适合我，只需要更新 BS 名称：'shown' -> 'shown.bs.popover' data('popover') -> data('bs.popover')跨度> 【参考方案12】：

这是一个“作弊”解决方案：

Follow the usual directions for a dismissable popup.

然后用 CSS 在框中打一个“X”。

CSS：

.popover-header::after 
    content: "X";
    position: absolute;
    top: 1ex;
    right: 1ex;

JQUERY：

$('.popover-dismiss').popover(
    trigger: 'focus'
);

HTML：

<a data-toggle="popover" data-trigger="focus" tabindex="0"  title="Native Hawaiian or Other Pacific Islander" data-content="A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.">?</a>

从技术上讲，如果有人单击“X”以外的其他内容，则可以将其关闭，但至少在我的情况下这不是问题。

【讨论】：

【参考方案13】：

$popover = $el.popover(
  html: true
  placement: 'left'
  content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>'
  trigger: 'manual'
  container: $container // to contain the popup code
);

$popover.on('shown', function() 
  $container.find('.popover-content a').click( function() 
    $popover.popover('destroy')
  );
);

$popover.popover('show')'

【讨论】：

【参考方案14】：

$(function() 
  $("#example").popover(
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">&times;</button></span>',
    content : 'test'
  )

  $(document).on('click', '#close', function (evente) 
    $("#example").popover('hide');
  );
  $("#close").click(function(event) 
    $("#example").popover('hide');
  );
);

<button type="button" id="example" class="btn btn-primary" >click</button>

【讨论】：

【参考方案15】：

    $('.tree span').each(function () 
        var $popOverThis = $(this);
        $popOverThis.popover(
            trigger: 'click',
            container: 'body',
            placement: 'right',
            title: $popOverThis.html() + '<button type="button" id="close" class="close" ">&times;</button>',
            html: true,
            content: $popOverThis.parent().children("div.chmurka").eq(0).html()
        ).on('shown.bs.popover', function (e) 
            var $element = $(this);
            $("#close").click(function () 
                $element.trigger("click");
            );
        );
    );

当您点击 element 并显示您的弹出窗口时，接下来您可以引发事件 shown.bs.popover 在此您将获得 element 在其中触发点击以关闭您的弹出窗口.

【讨论】：

【参考方案16】：

FWIW，这是我正在使用的通用解决方案。我正在使用 Bootstrap 3，但我认为一般方法也应该适用于 Bootstrap 2。

该解决方案启用了弹出框，并使用通用 JS 代码块为所有由“rel="popover”标签标识的弹出框添加了一个“关闭”按钮。除了有 rel="popover" 标记的（标准）要求之外，您可以在页面上放置任意数量的弹出框，并且您不需要知道它们的 ID——实际上它们不需要 ID一点也不。您确实需要使用 'data-title' HTML 标记格式来设置弹出框的标题属性，并将 data-html 设置为“true”。

我发现必要的技巧是建立一个对弹出框对象（“po_map”）的引用的索引映射。然后我可以通过 HTML 添加一个“onclick”处理程序，该处理程序通过 JQuery 为我提供的索引（“p_list['+index+'].popover(\'toggle\')”）引用 popover 对象。这样我就不需要担心 popover 对象的 id，因为我有一个对象本身的引用映射，其中包含 JQuery 提供的唯一索引。

这里是javascript：

var po_map = new Object();
function enablePopovers() 
  $("[rel='popover']").each(function(index) 
    var po=$(this);
    po_map[index]=po;
    po.attr("data-title",po.attr("data-title")+
    '<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">&times;</button>');
    po.popover();
  );

$(document).ready(function()  enablePopovers() );

这个解决方案让我可以轻松地在我网站上的所有弹出框上放置一个关闭按钮。

【讨论】：

【参考方案17】：

我发现下面的代码非常有用（取自https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/）：

$('[data-toggle="popover"]').popover(
  title: function()
    return $(this).data('title')+'<span class="close" style="margin-top: -5px">&times;</span>';
  
).on('shown.bs.popover', function(e)
  var popover = $(this);
  $(this).parent().find('div.popover .close').on('click', function(e)
    popover.popover('hide');
  );
);

【讨论】：

【参考方案18】：

悬停时粘滞，HTML：

<a href="javascript:;" data-toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Lorem Ipsum">...</a>

Javascript：

$('[data-toggle=popover]').hover(function(e) 
  if( !$(".popover").is(':visible') ) 
      var el = this;
      $(el).popover('show');
      $(".popover > h3").append('<span class="close icon icon-remove"></span>')
                        .find('.close').on('click', function(e) 
                            e.preventDefault();
                            $(el).popover('hide');
                        
      );
  
);

【讨论】：

【参考方案19】：

把它放在你的标题弹出构造函数中...

'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'

...在右上角获得一个小的红色“x”按钮

//$('[data-toggle=popover]').popover(title:that string here)

【讨论】：

【参考方案20】：

对于仍然有点困惑的人：

这里是在你让它显示后切换弹出框的工作原理，选择你用来触发它的同一个按钮并调用 .popover('toggle') 。

在这种情况下，关闭弹出框的代码是：

$('#example').popover('toggle');

【讨论】：

【参考方案21】：

作为一个非常简单的解决方案，我做了以下事情：

1) 添加以下 CSS：

.sub_step_info .popover::after 
    content:url('/images/cross.png');
    position:absolute;
    display:inline-block;
    top:15px;
    right:5px;
    width:15px;
    text-align:center;
    cursor:pointer;

2) 在弹出框触发元素上设置data-trigger="manual"

3) 然后基于https://github.com/twbs/bootstrap/issues/16802:

$('[data-trigger="manual"]').click(function() 
    $(this).popover('toggle');
).blur(function() 
    $(this).popover('hide');
);

这使用了弹出框上的任何位置都可以点击的基础，但是通过关注十字架，您将鼓励您所追求的行为。

【讨论】：

【参考方案22】：

对我来说，这是在弹出窗口中添加关闭按钮的最简单解决方案。

HTML：

    <button type="button" id="popover" class="btn btn-primary" data-toggle="popover" title="POpover" data-html="true">
                    Show popover
    </button>

    <div id="popover-content" style="display:none"> 
       <!--Your content-->
       <button type="submit" class="btn btn-outline-primary" id="create_btn">Create</button>
       <button type="button" class="btn btn-outline-primary" id="close_popover">Cancel</button>  
    </div>

Javascript：

    document.addEventListener("click",function(e)
        // Close the popover 
        if (e.target.id == "close_popover")
                $("[data-toggle=popover]").popover('hide');
            
    );

【讨论】：

【参考方案23】：

当单击关闭按钮时，我遇到了工具提示做一些时髦的东西的问题。为了解决这个问题，我使用了span 而不是使用按钮。此外，当单击关闭按钮时，我必须在关闭后单击工具提示两次才能使其再次打开。为了解决这个问题，我简单地使用了.click() 方法，如下所示。

<span tabindex='0' class='tooltip-close close'>×</span>

$('#myTooltip').tooltip(
    html: true,
    title: "Hello From Tooltip",
    trigger: 'click'
);    

$("body").on("click", ".tooltip-close", function (e) 
    else 
        $('.tooltip').remove();
        $('#postal-premium-tooltip').click();
    
);

【讨论】：

【参考方案24】：

这是一个基于上述@Chris 答案的工作解决方案，但已修复，因此在触发元素的后续点击时，您不必点击该元素两次。

如 cmets 中所述，手动使用 .popover('hide) 会弄乱引导程序的内部状态。

var closePopover = function(eventShown) 
   // Set the reference to the calling element
   var $caller = $('#' + this.id);

   // Set the reference to the popover
   var $popover = $('#' + $(eventShown.target).attr('aria-describedby'));

       // Unbind any pre-existing event handlers to prevent duplicate clicks
       $popover.find('.popover-close').off('click');

       // Bind event handler to close button
       $popover.find('.popover-close').on('click', function(e) 

          // Trigger a click on the calling element, to maintain bootstrap's internal state
          $caller.trigger('click');
        );
 

$('.popoverTriggerElement').popover(
   trigger: 'click'
)
.on('shown.bs.popover', closePopover)

现在，您可以使用关闭按钮而无需重复点击事件，并检查引导程序内部状态，使其按预期工作。

【讨论】：

【参考方案25】：

对于特定的弹出框，您可以在关闭按钮上添加一个 onclick 事件：

onclick="$('#my-popover').popover('hide');

【讨论】：

【参考方案26】：

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.popover-1.1.2.js"></script>

<script type="text/javascript">
$(function() 
$("#example").popover(
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span> <button     type="button" id="close" class="close">&times;</button></span>',
        content : 'test'
    )


$("#close").click(function(event) 

$("#example").popover('hide');
);
);
</script>

<button type="button" id="example" class="btn btn-primary" >click</button>

【讨论】：

抱歉，但这将永远起作用。 #close 仅在弹出框处于活动状态时存在，click 永远不会绑定。试试alert($("#close").length);（它会提示 0）

以上是关于如何在 Bootstrap 的弹出窗口中插入关闭按钮的主要内容，如果未能解决你的问题，请参考以下文章

WIN32 API 中 WM_MOUSEHOVER 上的弹出窗口 - 如何关闭它？

关闭jQUERY中的弹出窗口后如何刷新父页面？ [复制]

如何使用 webdriver 关闭网页上的弹出窗口

iframe中的弹出窗口如何显示在最外层？

Sencha touch 中类似 iPad 的弹出窗口

JS简易弹出层