PopoverからShadowを削除

Question

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>

Answer 1

これは、ボックスシャドウを追加しますので、あなたはちょうどそれを削除することができます。

#myPop1 { 
    box-shadow: none; 
} 

または一般に、あなたがそれを完全に上書きする場合：

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

はまた、あなたが

Answer 2

ときにしたい場合は、同じ方法で削除することができますので、それはあまりにもテキストに影を追加用心（.hover？.click？）ただし、あなたはそれを行います。その関数にこのコードを追加します。

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

それとも、あなただけのカスタムを追加することができ、その関数を見つけることができない場合：

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

Answer 3

は、我々はあなたがJSを初期化見ることができますか？ shadow: falseはCSSではないので、サンプルコードでは動作しません。このことができますホップ

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

- such-

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

か、.popup()を呼び出すどこにshadow: falseを追加すると、あなたのポップアップのdivにdata-shadow="false"を追加

お試しください！ここで

Answer 4

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

クロスブラウザ、動的に作成された要素のために働く、ともボタンやリストビューなどの要素が含まれている場合 はまた、 `.ui-オーバーレイ影を追加してくださいDaniel Davies