Jump to content

Overlay for particular element


weizenhuhn
 Share

Recommended Posts

Hi,

I want to render an overlay for a <table> element, if a condition is set, but the input fields are still visible and accessible:

    <?php if($noOverlay) : ?>        
    <table class="form-table">
    <?php else: ?>
    <table class="overlay form-table">
    <?php endif; ?>
            <tbody>
              <tr>
                <td style="width: 200px">Input: </td>
                <td>
                  <label for="input1"> 
                  	<input name="input" type="text" id="input1">
                  </label>
                  </td>
              </tr>
      </table>
.sp-dsgvo-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5) !important;
	z-index: 999999;
}


The result looks like that:
image.png.d4473b63fee251b76afac3c5a6e34ee6.png

 

An overlay with fixed position would work, but the position of the table is dynamically, so it's not possible to just create a overlay for the whole screen.

I would be really appreciate for some help here, thanks!

Link to comment
Share on other sites

Finally I had a success. Thank you! That worked for me:

<div class="position-relative form-table">
  <div class="overlay"></div>
  <table class="position-relative">
    <tbody>
      <tr>
        <td style="width: 200px">Input: </td>
        <td>
          <label for="input1">
            <input name="input" type="text" id="input1">
          </label>
        </td>
      </tr>
  </table>
</div>
.position-relative{
	position: relative;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5) !important;
	z-index: 20;
}

Result:

image.png.c137b483494b2c6a38e9541fa2809a85.png

 

Edited by weizenhuhn
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...