从弹出窗口移除阴影

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

参考：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>

来源

2017-04-12 taji01

请加上'的.ui叠加阴影{ \t \t的box-shadow：无; \t}' –

啊，谢谢你的工作！ – taji01

它增加了箱阴影，所以你可以删除。

#myPop1 { 
    box-shadow: none; 
}

或一般的，如果你想完全覆盖它：

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

另外注意它添加文字阴影太，所以你可以删除，如果你想以同样的方式

来源

2017-04-12 16:15:42 StefanBob

-1

当你激活悬停..（.hover？.click？）但是你这样做。该函数添加以下代码：

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

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

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

来源

2017-04-12 16:16:52

我不会使用jQuery来解决css问题，即使它是jQuery UI添加样式的开始 – StefanBob

只是在CSS中为您的想法添加了一个答案。尝试一下，享受！（当然，对于文本阴影，你是对的，但这也可以在CSS中完成） – deblocker

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

尝试增加data-shadow="false"到您的弹出DIV，为such-

<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 
});

跳这有助于！

来源

2017-04-12 16:19:16

很好的答案，upvote！鉴于JQM参考页面（？），我想知道CSS来自哪里 – deblocker

这里是如何在CSS中得到一个 “平” JQM弹出（没有任何的box-shadow）：

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

跨浏览器，适用于动态创建的元素，并且还用于包含的元素，例如Buttons或Listviews。或者，使用建议的方法在回答Daniel Davies

来源

2017-04-12 20:08:21 deblocker

从弹出窗口移除阴影

回答

相关问题