从Popover中移除阴影

Question

我使用JQuery-mobile为我的按钮实现弹出框。我的目标是消除弹出窗口后面的阴影。我怎么能做到这一点？

参考： http://api.jquerymobile.com/popup/#option-shadow

＆＃13;

＆＃13;

.ui-content {
  shadow: false
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div data-role="main" class="ui-content">

  <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline">Click Me to display popup</a>
  <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline">Click Me to display popup</a>
  <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline">Click Me to display popup</a>
  <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline">test</a>


  <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l,t">
    <p>Awesome <strong>popup!</strong></p>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它添加了box-shadow，因此你可以删除它。

notifyItemRangeInserted(int positionStart, int itemCount)

或者一般来说，如果你想完全覆盖它：

#myPop1 {
    box-shadow: none;
}

另外要注意它也会添加文本阴影，以便您可以按照相同的方式删除

Answer 2

我们能看到你的初始化JS吗？ shadow: false不是CSS，因此无法在您的示例代码中使用。

尝试将data-shadow="false"添加到弹出式div中，因此 -

<div data-role="popup" id="myPop1" data-shadow="false" class="ui-content" data-arrow="l,t">
  <p>Awsome <strong>popup!</strong></p>
</div>

或将shadow: false添加到您调用.popup() -

的任何地方

$( "#myPop1" ).popup({
  shadow: false
});

跳这个有帮助！

Answer 3

以下是如何获得＆＃34; flat＆＃34; CSS中的JQM Popup（没有任何box-shadow）：

＆＃13;

＆＃13;

.ui-popup-container * {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div data-role="main" class="ui-content">

  <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline">Click Me to display popup</a>


  <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l,t">
    <p>Awesome <strong>popup!</strong></p>
            <a href="#" class="ui-btn ui-corner-all" data-rel="back">OK</a>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;

跨浏览器，适用于动态创建的元素，也适用于包含的元素，例如Buttons或Listviews。 或者，在Daniel Davies

的答案中使用建议的方法

Answer 4

当你激活悬停..（.hover？.click？）然而你这样做。在该函数中添加此代码：

$('.ui-content').css('text-shadow','0');

或者，如果您无法找到该功能，则可以添加自定义：

$('.blah').on('hover', function(){ $('.ui-content').css('text-shadow','0'); });