How to cover the entire screen with a modal window?

<a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes">
    this content should appear below the modal

    <!-- #customize your modal window here -->

    <div id="dialog" class="window">
        <b>Testing of Modal Window</b> |

        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>

    </div>
    <br />
     more contents here
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
    <div id="mask"></div>
</div>

LIVE: http://jsfiddle.net/ruwmh/

How can we ensure that the modal screen covers the entire display? It currently does not.

javascriptjqueryhtmlcss

Answer №1

To improve the layout, modify the CSS as shown below

#mask {
  position:absolute;
  z-index:9000;
 /*add left and top to position it at the upper left corner */   
 left:0;
  top:0;
  background-color:#000;
  display:none;
}

View the updated version on jsFiddle http://jsfiddle.net/abc123/2/

Answer №3

#overlay {
  position: fixed;
  z-index:9000;
 /*include left and top to set it in the upper left corner */   
  left:0;
  top:0;
  background-color:#000;
  display:none;
}

Similar to Nicola Peluchetti's solution, but using position: fixed so that it is not bound by the coordinates of its parent elements with position: absolute/relative, but rather relative to the window

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the steps to showcase a specific option from a select list at the top row through VueJs

Below is the code to iterate through the elements of teamLeaderOfWithDescendants <option :value="item.user_id" v-for="item in teamLeaderOfWithDescendants"> {{item.user_full_name}} </option> Is there a way to prioritize the row where item.u ...

javascriptvue.jsvuejs2

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

Here is a method that I am working with: set_period_help_text: function(periodInput){ var metric = MonitorMetric.getSelectedMetric(); var periodStr = $('select[name=metric_period]').val(); var datapoints = Number(periodIn ...

javascripthtml

How can I properly type my object using generics if the Typescript code `let result: { [key: T[K]]: T } = {};` is not functioning as expected?

I am developing a function called keyBy that has a simple purpose. The objective of this function is to transform an array of objects into an object, using a provided 'key string': const arr = [{ name: 'Jason', age: 18 }, { name: &apo ...

javascriptarraystypescripttypes

The user interface design transforms as a PDF file is being generated through html2pdf

I am experiencing an unusual problem while using html2pdf to convert an HTML page to a PDF file and download it. The conversion process is successful and the PDF file is downloaded without any issues. However, when I click on a button to generate the file, ...

javascriptangulartypescripthtml2pdf

Conceal and reveal submenu options

I have been exploring a jQuery function that toggles between hiding and showing different divs when a menu item is clicked. However, I am facing an issue where clicking on the same menu item does not close the newly opened div as intended. Additionally, I ...

javascriptjqueryhtmlcss

What is the method to access a variable within an attribute that is not prefixed with ng-*?

For my project, I am utilizing a datePicker called in conjunction with AngularJS. Here is an example of how I incorporate it: <div class='col-md-2'> <div class="form-group"> <label>End date</label> <div clas ...

javascriptangularjstwitter-bootstrapdatepicker

Storing session data for each HTTP request in a "global" variable using NodeJS

Linking back to a thread that is two years old where the topic aligns closely with what I am looking for. In the realm of C# development, there exists a Session object that holds user session information and can be accessed from any location. This object ...

javascriptnode.jssessionexpress

What are some methods to turn off AJAX caching in JavaScript without relying on jQuery?

I'm running into an issue where my current method of framing the ajax url seems to be caching the old response on the second call. How can I ensure that I always get the latest response? Let me know if you need more information. Snippet of Code : va ...

javascriptajax

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...

javascriptjqueryhtmlcssasp.net-mvc

Highlight columns and rows when hovered over in a striped table using CSS styling

I have successfully implemented a CSS-only method for highlighting table columns on hover from a tutorial I found at https://css-tricks.com/simple-css-row-column-highlighting/ However, I am encountering an issue with applying the highlight to striped tabl ...

htmlcss

What is the best way to merge two objects in a JSON array and separate them with a comma?

Hey there, I could use some assistance with formatting a code snippet. I have written JavaScript code to parse JSON data which includes latitude and longitude information: const api_url = 'json.php' async function getjsonlatest() { const resp ...

javascripthtml

Display a progress bar in an application to visualize the loading of database records

Within my application, I am accepting a numerical input that is used to generate results on a separate page. The process involves running multiple sequential JDBC queries against Oracle database tables, resulting in a significant delay (1-2 minutes) for th ...

javahtmlcssjspjdbc

Move anchor tags within HTML content produced from Markdown using Jekyll

I am facing an issue with the navigation bar on a website I am currently developing. The fixed navigation bar at the top is causing some alignment problems with anchor tags. While I know about the common solution to this issue, I am unsure of how to implem ...

htmlcssmarkdownjekyll

If the background color is blue, then element class will be added

Currently exploring the realm of JavaScript, I am tackling a challenge with adding a class to an element based on its background color. Specifically, I aim to add a class to elements with a background color set to rgb(32, 44, 62). However, my current imple ...

javascript

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

htmlcssflexbox

Updating ngModel using the value retrieved from a service call

After experiencing dissatisfaction with Angular's form validation, I decided to develop my own solution. However, I have encountered a perplexing issue that has me at a loss. Here is how my setup looks: I employ a directive to create a new form. Th ...

javascriptangularjs

How to shift a bootstrap-4 button to the right without disrupting the layout

Recently, I delved into learning bootstrap-4 and developed a basic social media website utilizing it. However, I encountered an issue while attempting to align my create-post, login, and register buttons to the right using "float-right" as it caused some f ...

htmlcssbuttonbootstrap-4

Is it possible for me to store the location of an element in the page_source using the .any? method and assign it to a variable for future reference in my Ruby code

My code is scanning the page source for certain constants like ' AA1 ', ' AA2 ', ' AB3 ', and so on. When a constant is found, I want to be able to access the element next to it, which has a dynamic location and changes freque ...

cssrubyselenium-webdriver

Tips for ensuring the .selected class remains on the correct a(href) after a page reload in a list of hrefs

Every time I click on a link in my sidebar, the list of links reloads. However, when I move to the next page, the "selected" class goes back to "all" instead of staying on the chosen link. I've looked at explanations for tabs, but I couldn't get ...

javascriptjquerynode.jspughref

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

While there are no errors showing up in the Chrome Developers Error code, I am facing an issue with my form where the text fields are not visible. It should be a simple task, but it has turned into a headache for me. I would greatly appreciate any help i ...

javascripthtmlcsslaravel-5bootstrap-4