从 Popover 中移除阴影

Posted 2023-05-08

【中文标题】从 Popover 中移除阴影

【英文标题】：Remove Shadow from Popover

【发布时间】：2017-09-08 12:51:17

【问题描述】：

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

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

.ui-content 
  shadow: false

<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>

【问题讨论】：

请加.ui-overlay-shadow box-shadow: none;

啊谢谢你成功了！

【参考方案1】：

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

#myPop1 
    box-shadow: none;

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

.ui-overlay-shadow 
    box-shadow: none;

还要注意它也会添加文本阴影，因此您可以根据需要以相同的方式删除它

【参考方案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
);

希望这有帮助！

【讨论】：

好答案，点赞！鉴于 JQM 参考页（？），我想知道 CSS 是从哪里来的（？）

【参考方案3】：

以下是如何在 CSS 中获得“平面”JQM 弹出窗口（没有任何框阴影）：

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

<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>

跨浏览器，适用于动态创建的元素，也适用于包含的元素，例如按钮或列表视图。 或者，在Daniel Davies的答案中使用建议的方法

【参考方案4】：

当您激活悬停时.. (.hover?.click?) 但是您会这样做。在该函数中添加此代码：

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

或者，如果您找不到该功能，您可以添加一个自定义：

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

【讨论】：

我不会使用 jQuery 来解决 css 问题，即使是 jQuery UI 会添加样式以开头

刚刚在 CSS 中为您的想法添加了一个答案。试试看，享受吧！ （当然，对于 text-shadow，你是对的，但这也可以在 CSS 中完成）