1

I need to create a popup on a bigger site and there the whole background (also Menu and so on) shall be darker as you can imagine. So the focus is completely on the popup.

This is basically an easy task if you simply put the upper div with the background on top of it. But in my case I just can put the div in the container.

<div class="container">
  <div class="background"></div>
  <div class="popup">
    some text 
    <input type="submit">
  </div>
</div>

So my question is how can I use it in this way but:

  • I want to remove "position:absolute;" from the popup css (doing this the popup is behind the background div) --> and I don't really want to use z-index if possible
  • I there any alternative to make the background darker without completely changing the position and css settings (all is currently totally fine, I just need a darker background on the whole page)

https://jsfiddle.net/kwoxer/81dken0e/3/

Here is a mockup if you just take the picture of someone else with the same issue: Creating a dark background when a new form appears

Community
  • 1
  • 1
kwoxer
  • 3,734
  • 4
  • 40
  • 70
  • This question is like, I wanna create a webpage, but I don't wanna code. What crazy thing you wanna do without `z-index`? – Praveen Kumar Purushothaman Dec 28 '15 at 15:09
  • 2
    Simple, I read your question twice. You **need** to use `z-index` and `position: fixed` or `position: absolute`. No matter what! Why not? – Praveen Kumar Purushothaman Dec 28 '15 at 15:10
  • So there is actually no other way right? – kwoxer Dec 28 '15 at 15:12
  • No boss. You have to use the both. `fixed` or `absolute`, your wish. I am giving you a sample one, which is better than what's there now. – Praveen Kumar Purushothaman Dec 28 '15 at 15:12
  • 1
    Thank you. I rethinked about it and now it's working. Actually some z-indexing and the position was it. Also didn't need to do huge things. But anyway whoever downvoted this question should rethink that. It was a pretty good question IMHO. Just because my intention was another is no reason for downvoting. Have a great day @Praveen. – kwoxer Dec 28 '15 at 15:51

1 Answers1

1

A sample one using position and z-index for reference, as discussed in the comments.

$(function () {
  $("a").click(function () {
    $(".modal").hide().removeClass("hidden").fadeIn();
    $("body").css("overflow", "hidden");
    return false;
  });
  $(".modal").click(function () {
    $(this).fadeOut();
    $("body").css("overflow", "auto");
  });
});
* {box-sizing: border-box; margin: 0 0 10px; padding: 0;}
.modal {position: fixed; background-color: rgba(0,0,0,0.75); left: 0; top: 0; bottom: 0; right: 0;}
.modal .window {position: absolute; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.hidden {display: none;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="modal hidden">
  <div class="window">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eligendi aperiam beatae officiis, sed perferendis quod laudantium. Aperiam, maxime, iure. Sapiente similique iusto modi harum vitae tempore amet neque impedit.</p>
  </div>
</div>
<h1>Contents</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consectetur sapiente neque quas inventore eius, voluptatem minima alias ipsam facilis a id accusamus, laborum, nam, velit ut. Amet voluptatibus, doloremque.</p>
<p><a href="#modal">Open Modal Window</a></p>
<p>Ipsa aliquam voluptatibus reprehenderit, expedita, fuga explicabo pariatur sit nostrum rem, quis dolores eligendi culpa atque alias consequuntur et quas dolorum officiis ab amet repudiandae! Et eos, veritatis incidunt. Non?</p>
<p>Error, maiores beatae culpa deserunt quae dicta odio temporibus itaque provident. Totam doloremque iure, eveniet omnis dolorem a explicabo voluptate necessitatibus libero maiores reiciendis ipsam ad qui, perferendis, officiis praesentium.</p>
<p>Atque pariatur eligendi tempora enim nemo rerum officia a, modi ut, quasi deserunt hic consectetur. Laborum, sequi, porro rem dolores obcaecati nobis earum voluptatibus quia itaque ad nostrum similique blanditiis.</p>
<p>Explicabo eum architecto, eligendi similique. Aperiam autem illo nulla, laudantium ut, blanditiis harum a. Deserunt est, corporis sint quae numquam, placeat! Maxime beatae esse atque facere delectus iure cum incidunt.</p>
<p>Ipsa soluta est, voluptatibus voluptas beatae architecto alias culpa atque temporibus voluptatum recusandae mollitia deleniti. Possimus nihil accusamus quod dolores eligendi perspiciatis eos, maiores, officia numquam, id esse aperiam consequuntur.</p>
<p>Rerum eaque quisquam voluptate temporibus placeat in alias accusantium iste dolor eveniet neque quia ipsum quas itaque omnis eum animi mollitia fuga ex, reiciendis, recusandae ipsam deleniti inventore. Cupiditate, magni.</p>
<p>Hic praesentium labore quibusdam sunt non quis ipsum aut consectetur? Tempore ullam sit neque dolor, ad adipisci explicabo facilis excepturi, consequatur hic laboriosam a! Minus veniam tenetur quibusdam similique ipsum.</p>
<p>Eligendi, perferendis officiis illum eos, nesciunt delectus accusantium fugiat voluptatem ab nulla consequuntur magnam expedita ut pariatur. Quidem rem corporis dicta totam maiores cum cumque quibusdam! Inventore ratione libero voluptas!</p>
<p><a href="#modal">Open Modal Window</a></p>
<p>Distinctio veritatis provident quia voluptatem, aliquid explicabo voluptatum enim sit eius quae itaque expedita id. Voluptates eum sed, qui facilis cum suscipit, est ipsa dolor laborum. Totam magnam, vero assumenda.</p>
<p>Accusamus rerum fugit culpa, dignissimos nihil esse quidem maxime porro possimus dolor cupiditate voluptatum illo voluptatem, ut corrupti, voluptatibus? Reiciendis corporis maiores non quidem nam repellat, rem omnis adipisci deleniti!</p>
<p>Alias dolor, libero veniam a rerum qui iure aut officia repellendus in adipisci quidem incidunt quos ut delectus id fugiat sunt sapiente, officiis sint. Perspiciatis, harum quos in. Eveniet, magni.</p>
<p>Iste magnam suscipit necessitatibus libero nulla, molestias itaque blanditiis iure provident ad, hic architecto natus tempore quibusdam id voluptatibus inventore cupiditate laudantium dicta similique quisquam voluptas? Ratione ipsum, magnam qui!</p>
<p>Animi itaque repellendus error delectus, sequi voluptatibus earum libero beatae officia nam ullam nemo sit voluptatem vero, amet qui fuga harum aut ipsam, dolores eligendi! Repellendus, quis, quam. At, nulla?</p>
<p>Quam quos laborum id deserunt voluptatum commodi sunt dolor, ex debitis excepturi, necessitatibus! Deserunt iusto saepe numquam modi excepturi maxime iste! Non tenetur rem, impedit? Consequuntur obcaecati nam vitae velit.</p>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252