CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-mobile
taji01
taji01

Reputation: 2615

Remove Shadow from Popover

I'm using JQuery-mobile to implement a popover for my buttons. My goal is to remove the shadow behind the popover. How can i accomplish this?

enter image description here

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

Upvotes: 2

Views: 2423

Answers (4)

deblocker
deblocker

Reputation: 7697

Here is how to get a "flat" JQM Popup (without any box-shadow) in CSS:

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

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

Upvotes: 1

Daniel Davies
Daniel Davies

Reputation: 51

Can we see your initialising JS? shadow: false isn't CSS and so won't work in your example code.

Try adding data-shadow="false" to your popup div, as such-

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

or add shadow: false into wherever you call .popup()-

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

Hop this helps!

Upvotes: 3

Marc Alexander
Marc Alexander

Reputation: 821

When you activate the hover.. (.hover? .click?) However you do that. Add this code in that function:

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

Or if you can't find that function you could just add a custom:

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

Upvotes: -1

StefanBob
StefanBob

Reputation: 5128

It adds box-shadow, so you can just remove that.

#myPop1 {
    box-shadow: none;
}

Or in general if you want to override it completely:

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

Also beware it adds text-shadow too so you can remove that the same way if you want

Upvotes: 4

Related Questions