Question

我尝试做的是将关闭按钮从华丽的弹出窗口移动到灯箱外面。我试图通过将溢出可见应用于父容器并将其放在外面来尝试这样做。但是，在Chrome中会出现以下（不需要的）行为。

在灯箱内点击关闭按钮时，它会按预期关闭。在灯箱外面点击按钮（溢出）时，事件不会触发。

请参阅以下JS-Fiddle：http://jsfiddle.net/JKhyM/4/

// initalize popup
jQuery(document).ready(function( $ ) {

jQuery.mp_arv_scoped.open({ 
  items: data,
  type: 'inline',
  inline: {
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
            '<div class="mfp-content"></div>'+
            '</div>',
  },
   closeMarkup: '<div class="mfp-set-outside"><button class="mfp-close mfp-new-close" type="button" title="Close (Esc)">X</button></div>'
   ,alignTop:false
  ,callbacks: {
    markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
      // console.log('Parsing:', template, values, item);
    }
  }
});

}）;

提前谢谢你们

Answer 1

只需更新此css：

使用：

，而不是将关闭按钮关闭with top:-15px;和right:-15px;

top:0px;
right:0px;
margin-top:-25px;
margin-right:-25px;

使用color:white !important;根据需要使用颜色。

结果：

.mfp-close {
  overflow: visible;
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top:-25px;
  margin-right:-25px;
  color: white !important;
  font-size: 30px;
  opacity: 1;
  text-decoration: none;
  text-align: center;
  filter: alpha(opacity=100);
  font-style: normal;
  background:url('close.png');
  font-family: Arial, Baskerville, monospace;
}

演示：

http://jsfiddle.net/JKhyM/6/

按钮事件不会在溢出区域中触发

1 个答案: