從彈出窗口移除陰影

我正在使用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

從彈出窗口移除陰影

回答

相關問題