ios – SwiftUI – Including dimmer view behind customized alert

Noob to SwiftUI. I created a view modifier for reusable customized alert which works as anticipated. I now wish to add a dimmer view in between presenting view and alert view i.e. view behind the alert which covers full display and disables any clicks on the presenting view.

I attempted including background on the presenting view when alert is introduced, however nothing is going on.

Customized alert view modifier, view extension and consider mannequin:

import Basis
import SwiftUI

struct CustomAlertView: ViewModifier {
    @Binding var isPresented: Bool

    init(isPresented: Binding<Bool>) {
        self._isPresented = isPresented
    }

    func physique(content material: Content material) -> some View {
        content material.overlay(alertContent())
    }

    @ViewBuilder
    personal func alertContent() -> some View {
        GeometryReader { geometry in
            if self.$isPresented.wrappedValue {
                VStack {
                    Picture(systemName: "information.circle").resizable().body(width: 30.0, top: 30.0).padding(.prime, 30).foregroundColor(.cyan)

                    Textual content("Error title").foregroundColor(Coloration.black).font(.title2).daring().lineLimit(nil).padding([.leading, .trailing], 24.0).padding(.prime, 16.0)
                    Spacer()
                    Textual content("There was an error whereas processing your request.").foregroundColor(Coloration.black).font(.physique).lineLimit(nil).padding([.leading, .trailing], 18.0).padding(.prime, 16.0)
                    Spacer()
                    
                    Button(motion: { self.$isPresented.wrappedValue.toggle() }) {
                        Textual content("Okay").foregroundColor(.white).font(.largeTitle).daring()
                    }.padding(.backside, 25.0)
                }.fixedSize(horizontal: false, vertical: true)
                    .background(Coloration.purple)
                    .cornerRadius(10)
                    .clipped()
                    .padding([.leading, .trailing], 5.0)
                    .place(x: geometry.measurement.width/2, y: geometry.measurement.top/2)
                    .body(width: 328.0)
            }
        }
    }
}

extension View {
    func customAlert(isPresented: Binding<Bool>) -> some View {
        return modifier(CustomAlertView(isPresented: isPresented))
    }
}

class CustomViewModel: ObservableObject {
    @Revealed var showAlert = false
    
    func doSomething() {
        // Units showAlert to true incase of community disconnect or some question failure.
        self.showAlert = true
    }
}

Content material view:

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel: CustomViewModel = CustomViewModel()
    
    var physique: some View {
        VStack {
            Spacer()

            Button(motion: { viewModel.doSomething() }) {
                Textual content("Begin").foregroundColor(Coloration.pink).font(.title)
            }.padding(.backside, 100.0)
        }
        .customAlert(isPresented: $viewModel.showAlert)
    }
}

Right here, ContentView is the presenting view because it’s what’s presenting the alert. I wish to add a grayish form of view/dimmer view masking full display and it is going to be beneath the introduced alert. When dimmer view is current and I click on on “Begin” button in ContentView, it needs to be disabled. I do not know if I can obtain this by modifying the customized alert view modifier, therefore I used to be attempting so as to add a background shade to ContentView, however nothing appears to be taking place. I’ve an excessive amount of of code within the view mannequin and content material view, so I eliminated most of it and stored what I assumed was wanted.

How do I obtain it?