PopoverからShadowを削除します

私はJQuery-mobileを使って私のボタンのポップオーバーを実装しています。私の目標はポップオーバーの背後にある影を取り除くことです。どうすればこれを達成できますか。

enter image description here

Reference: http://api.jquerymobile.com/popup/#option-shadow

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

  Click Me to display popup
  Click Me to display popup
  Click Me to display popup
  test


  <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l,t">
    

Awesome popup!

</div> </div>
</div> </div>

2
ああ、お疲れ様でした!
追加された 著者 taji01,
.ui-overlay-shadow {box-shadow:none;}を追加してください。
追加された 著者 Nadezhda Serafimova,

4 答え

それはbox-shadowを追加するので、あなたはそれを削除することができます。

#myPop1 {
    box-shadow: none;
}

完全に上書きしたい場合は、一般的には:

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

また、テキストシャドウも追加されるので、必要に応じて同じ方法で削除できます。

4
追加された

初期化中のJSを見てもらえますか? shadow:false はCSSではないため、サンプルコードでは機能しません。

次のように、ポップアップdivに data-shadow = "false" を追加してみてください。

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

Awsome popup!

</div>

または .popup()を呼び出す場所に shadow:false を追加します -

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

これは役に立ちます。

3
追加された
良い回答、投票してください! JQMのリファレンスページ(?)を考えると、CSSはどこから来たのでしょうか
追加された 著者 deblocker,

あなたがホバーを起動すると..(.hover?.click?)しかしあなたはそれをする。その関数にこのコードを追加します。

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

あるいはその関数が見つからない場合は、カスタムを追加するだけです。

$('.blah').on('hover', function(){ $('.ui-content').css('text-shadow','0'); });
1
追加された
あなたの考えにCSSの答えを追加したところです。試してみて楽しんでください。 (もちろん、text-shadowに関しては、あなたは正しいですが、これはCSSでも可能です)
追加された 著者 deblocker,
jQuery UIでスタイルを追加しているにもかかわらず、CSSの問題にjQueryを使用していない
追加された 著者 StefanBob,

CSSで「フラット」なJQMポップアップ(ボックス影なし)を取得する方法は次のとおりです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

  Click Me to display popup


  <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l,t">
    

Awesome popup!

OK </div> </div>
</div> </div>

Cross-browser, works for dynamically created elements, and also for contained elements, for example Buttons or Listviews. Alternatively, use the suggested approach in the answer from Daniel Davies

1
追加された