javascript/jquery - steps to design an effective modal page overlay

Struggling for the past few weeks to create a modal dialog using javascript/jQuery. While iOS and Android devices seem to work fine, Windows mobile/Opera mobile often present issues with the modal size. It either requires excessive scrolling or ends up being too short, revealing the background of the page beneath. I am looking for the best way to size the modal correctly and resize it when the device orientation changes.

Current Implementation:

CSS

#dialog { 
left: 0; top: 0; right:0; bottom: 0; 
position:absolute; z-index:4; color: #424242; font-size:14px; display:none; 
background: -moz-linear-gradient(#35848b, #6dbcc9); background: -ms-linear-gradient(#35848b, #6dbcc9); background: -o-linear-gradient(#35848b, #6dbcc9); background: -webkit-linear-gradient(#35848b, #6dbcc9); 
}

JAVASCRIPT (TRIGGERED ON DEVICE ORIENTATION CHANGE AND PAGE LOAD)

viewportW = window.innerWidth;
viewportH = window.innerHeight;
$j('#dialog').css({'min-height' : viewportH+'px' });

Looking for solutions to ensure that the dialog is always as tall as the viewport and covers any content below it. Any advice, best practices, or tutorials would be greatly appreciated. Thanks!

javascriptjquerycssmodal-dialog

Answer №1

If you're looking to implement a dialog feature on your website, I recommend checking out the jQuery UI Dialog.

For the jQuery UI library download, you can access it through this link:
http://jqueryui.com/download

To learn how to create a modal dialog, refer to this informative article:

<div class="create_dialog">Content of the div</div>    
<script type="text/javascript">
    $(document).ready(function() {
        $('.create_dialog').dialog({ bgiframe: true,
            height: 200,
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            }                
        });
    });        
</script>

UPDATE

For better results, you might want to consider using window.availHeight instead of window.innerHeight?

Answer №2

Experiment with utilizing the external measurements:

viewportW = window.outerWidth;

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

What is the best way to add a gradient background image to a container that also has margins?

I am currently working on a push menu that shifts the main content container by adding margin-left to it. I am aiming to achieve a background image effect similar to what is seen on . Here is the progress I have made so far in my codepen: https://codepen ...

htmlcss

"We encountered an error with the external script while trying to load file content using jQuery's ajax function. It

//C.php <script type="text/javascript"> $(document).ready(function(e) { $('div').load("D.php"); }); </script> <div></div> //D.php <script type="text/javascript" src="D.js"></script> //D.js console.log(45 ...

javascriptjqueryajax

Outputting HTML with functions

I have a function that returns HTML code. renderSuggestion(suggestion) { const query = this.query; if (suggestion.name === "hotels") { const image = suggestion.item; return this.$createElement('div', image.title); } ...

javascriptvue.jsvuejs2

What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

My goal is to have two different site templates, one for desktop (which is already good) and one for mobile. For the mobile template, I want it to display only an image that fills the entire screen. The image should take up all the available space in term ...

htmltwitter-bootstrapcssfrontend

Utilize a unique CSS selector and content property to insert a space character between two inline-block elements

I have a group of connected span elements with the class tag from bootstrap v4. Because they are generated from a react.js array of JSX elements, they sit adjacent to each other without any spacing between them: <span class="tag tag-primary">text< ...

csscss-selectorspseudo-elementcss-content

eBay API request error: "You do not have the necessary permissions to complete the request."

While working on integrating the eBay API, I encountered an issue with creating a payment policy. Following the instructions provided in this guide , I generated a token and sent it using Postman. However, I received an error: { "errors": [ ...

javascriptnode.jsreactjsebay-api

Error: Unable to call topFrame.window.changeSelectedBarStyle because it is not a valid function. What could be causing this

This function is called changeSelectedBarStyle: function changeSelectedBarStyle(tdId){ $("#menuTable td").each(function(index){ if(this.id == tdId){ $(this).removeClass("menuPanel"); $(this).addClass("menuPanelSelected" ...

javascriptjquery

Exploring discrepancies between two tables with the power of Javascript

const firstTable = document.getElementById('table_1') const secondTable = document.getElementById('table_2') const rows1 = firstTable.rows const rows2 = secondTable.rows for (let i = 0; i < rows1.length; i++) { for (let x in rows ...

javascripthtmljquerycss

$injector.modulerr problem

After spending a considerable amount of time analyzing every line of code, I can't seem to pinpoint any errors. Here is what I have: HTML: <body ng-app='myApp'> <div class="wrapper"> <nav> <ul ng-controller="pat ...

javascriptangularjsfrontendngroute

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

Steps to update the active state in the "reducer" when clicking on elements outside of the "reducer" area

Working with react-redux has presented some challenges for me. I've created multiple reducers such as action, root reducer, active_step reducer, and list_step reducer. One aspect that I find intriguing is the ability to dynamically map and change the ...

javascriptreactjsecmascript-6redux

What is preventing me from successfully sending form data using axios?

I've encountered an issue while consuming an API that requires a filter series to be sent within a formData. When I test it with Postman, everything works smoothly. I also tried using other libraries and had no problems. However, when attempting to do ...

javascriptaxiosfetch

How can I pass a JavaScript variable through the URL in a Rails 4 application to access it in the controller?

Struggling to pass the value of a JavaScript variable in the URL and then retrieve it in my Rails 4 app controller using param[:my_variable]. Despite trying various methods, none seem to work for me. I am unable to successfully pass my JavaScript variable ...

javascriptjqueryruby-on-railsrubyruby-on-rails-4

Interactive chart embedded within a container

I have recently designed a card using Bootstrap and I would like to include a table with some data in it. However, I am facing an issue where the table data spills out of the card when I reduce the screen size for responsiveness testing. Could someone pl ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Retrieve the date information from the <td> element, if it exists

There are numerous rows in the table. The table cell labeled "dates" may contain either a specific date or the word "Permanent". If there is a date present and it happens to be greater than today's date, it needs to be highlighted in red. I attempted ...

javascriptjquery

Toggle the panel upwards using jQuery's slideToggle function

Looking to create an expandable footer triggered by a click on the '+' sign... Initially, the footer will display basic copyright information and social media links. Upon clicking the sign, I want a sitemap and additional content to slide above t ...

jqueryhtmlslidetoggle

ways to add spacing between bootstrap columns

I am currently using Bootstrap 5 and I'm trying to create a row with 6 columns. I have added gutter in the row but for some reason, the spacing between the columns is not being applied. Can anyone help me figure out what I'm doing wrong here? Bel ...

htmlcssbootstrap-5

Creating a reusable field for reactive forms in Angular: A step-by-step guide

I need assistance with creating a versatile field component for reactive forms, but I am facing challenges in retrieving the value from the custom-input element. <form [formGroup]="form" (ngSubmit)="submit()"> <custom-input i ...

javascriptangularangular2-forms

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. https://i.sstatic.net/kRJOb.png Here is my HTML code: <section class="favorit ...

javascripthtmlcssangulartypescript

Execute the getJSON calls in a loop for a count exceeding 100, and trigger another function once all

In order to process a large grid of data, I need to read it and then make a call to a $getJSON URL. This grid can contain over 100 lines of data. The $getJSON function returns a list of values separated by commas, which I add to an array. After the loop fi ...

javascriptjquery