iOS reveals often have a foundation modal that appears behind the background

I am currently working on implementing a confirmation modal that pops up when a button is clicked. Although the modal appears, it seems to be positioned behind the background that darkens the rest of the page.

Relevant CSS:
.reveal-modal-bg {
  background: rgba(0,0,0,.75);
  z-index:2000;
}

.reveal-modal {
  border-radius:7px;
  border:none;
  padding:20px;
  z-index:9999;
}

Despite setting the z-indices correctly, the issue arises when viewing the modal on Safari in iOS 9. The modal appears incorrectly and gets hidden behind the background. Can someone advise me on how to bring it back to the front? Thank you for your help in advance.

ioscsszurb-foundation-5

Answer №1

This solution is effective for my situation

.reveal-modal { 
   z-index:2000 !important;
   -webkit-transform: translate3d(0,0,1px);
   transform: translate3d(0,0,1px);
}

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

Incorporating a Decimal Point Functionality into my Calculator Application

edit: @IBAction func decimal(_ sender: UIButton) { label.text = label.text! + String(decimal) numberOnScreen = Double(label.text!)! performingMath = true do { previousNumber = Double(self.label.text!)! } } Despit ...

iosswiftdecimalcalculator

Modifying the Placeholder Text for Zip Code on the Cart Page in WooCommerce

I am curious about How can I modify the placeholder text for the Zip code on the Cart page? I want it to remain "POSTCODE" even when I click on the Zip code field. Currently, the placeholder text changes to "postcode" once I click on the Zip code field, ...

phpcsswordpresswoocommerce

As the screen size decreases, stacked Font Awesome icons seem to vanish

Currently, I'm designing a form that requires the user to select a color scheme by clicking on circle font awesome icons. These icons are implemented using Bootstrap and when clicked, a stacked font-awesome icon appears. However, I've encountered ...

htmlcssvue.jsbootstrap-4font-awesome

Issues with Image and Product Name Rendering in Outlook for Windows

Having a bit of trouble with Outlook PC not cooperating with my product images and names. While other email clients show the product names below the images as intended, Outlook PC is causing the names to appear next to the images like this - Product name ...

htmlcssemailoutlookhtml-email

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...

javascripthtmlcssdom

Buttons aligned evenly with textbox

Trying to construct an input box with two buttons positioned on the left and right. Presenting the current iteration of my project: The desired appearance should resemble the textbox and button layout found here: Although I've managed to achieve a s ...

htmlcss

Analyzing the string's worth against the user's input

I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...

javascripthtmlcss

Certain hues remain unaffected when changing themes, exclusive to Chrome

I have been working on a project that includes a toggle feature to switch between different themes. However, I am encountering an issue where the theme does not update properly when changing from a dark theme to a light theme or vice versa. The colors rema ...

javascripthtmlcss

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

csshtmlcss-floatsidebar

Is it considered acceptable to include a stylesheet inside the <body> element?

When dividing my web pages into sections, such as headers and content, I find it challenging to avoid placing links to external stylesheets within the <body> tags. I prefer not to combine all styles into one large file or include all stylesheets in ...

htmlcss

iOS7 Text-To-Speech (TTS) Feature

My application has a feature that plays text when it becomes available. If there is music playing in the background, I want to lower the volume of the music while my app's text is being played. To achieve this, I used: [AVAudioSession sharedInstance] ...

iostext-to-speechavspeechsynthesizeruniversal-volume-control

Changing the app's name within the Expo platform for iOS builds on Apple devices

Upon running eas build, I encountered the following error message. I'm looking to change the name in the CLI, but the documentation doesn't provide a clear explanation. While searching online, I came across this article which outlines how to do i ...

iosexpoeasexpo-build

What is the best approach to extract data from a while loop?

Simply put, I am working on a function that generates random RGB values and then converts them into colors. However, I want to ensure that the colors fall within a specific Luminance range. To achieve this, I am using a while loop to create the RGB values ...

iosswiftwhile-loop

Issue with ASP.NET C# querying MS Access database

I am experiencing issues with the like query not working. Can someone help me troubleshoot? Below is the code I am using: string Item_Name = txt_search.Text.Trim(); string Conn = ConfigurationManager.ConnectionStrings["AjitConnectionString"].ToString(); ...

javascriptcssasp.netms-access

Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible? #navigationWrap { position: fixed; top: 0; ...

htmlcss

Pressing the UIButton on the UIView resulted in an error when attempting to navigate to

When a user clicks on a particular cell in a tableview, I am using UIView to create an overlap on the present view. Here is the code snippet: - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Code to ini ...

iosiphoneuitableviewuiviewcontroller

How to center and play a video within a frame on iOS devices

Is there a way to play a video within a view instead of in fullscreen? I have tried the code below to create a frame and play the video inside it, but I'm facing an issue where the frame is not centered on the screen (it appears on the right side). A ...

objective-cios

Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

I am experiencing an issue with the CSS formatting of a section on my website. The products in the product grid do not display properly in order when the screen size is too small. For instance, if you visit this specific site: and view it on a screen lar ...

htmlcssmagento

Setting a closure to encapsulate a global variable

I possess a set of functions that allow me to configure prompts for when someone exits a page while inputting values. However, my main concern lies in how to properly encapsulate the checkFlag. Currently, checkFlag is being treated as a global variable whi ...

javascripthtmlcss

Are there any Android counterparts to plist files similar to what we see in iOS?

Is there a similar method in Android to quickly read and write data from a file like iOS does with plist files using NSDictionary? I have experience creating an app on iOS that utilized a plist file with hundreds of entries, which is essentially just XML ...

javaandroidobjective-cios