SwiftUI modal dismiss

Question

I want to dismiss the modal either by tapping on the same button i call it with, or by tapping anywhere on the screen.

But when popup pops, it doesn't let me interact with neither of them. Can you please provide me a solution?

ZStack{
                Color.black.opacity(0.4)
                    .edgesIgnoringSafeArea(.all)
                    .animation(.none)
                VStack{
                    Circle().fill(Color.orange)
                        .frame(width: 70, height: 70)
                        .overlay(Image(systemName: "questionmark.circle").font(.system(size: 50)).foregroundColor(.white
                        ))
                        .offset(y: 40)
                        .zIndex(1)
                    VStack{
                        Color.orange.frame(height: 40)
                        Spacer()
                        Text("Let the popup open")
                        Spacer()
                        Button("Present!") {
                            isPresented.toggle()
                        }
                        .fullScreenCover(isPresented: $isPresented){
                            FullScreenModalView(showPopUP: $showPopUp)
                        }.padding(.vertical, 12)
                        .frame(maxWidth: .infinity)
                        .background(Color.orange)
                    }.background(Color.white)
                    .cornerRadius(12)
                }.frame(height: 250)
                .background(Color.clear)
                .padding(.horizontal, 35)
                .offset(y: 150)
                .scaleEffect(x: showPopUp ? 1 : 0.8, y: showPopUp ? 1 : 1.3)
                .animation(.interactiveSpring(response: 0.3, dampingFraction: 0.3), value: animate)
            }.opacity(showPopUp ? 1 : 0)

Answer 1

Your example doesn't include enough code to compile, so I've made a smaller, minimal example to show the idea:

struct ContentView: View {
    @State var modalPresented = false
    
    var body: some View {
        Button(action: {
            modalPresented.toggle()
        }) {
            Text("Present")
        }.fullScreenCover(isPresented: $modalPresented) {
            ModalContent(presented: $modalPresented)
        }
    }
}

struct ModalContent : View {
    @Binding var presented : Bool
    
    var body: some View {
        VStack {
            Text("Modal content")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            Color.green.edgesIgnoringSafeArea(.all)
                .onTapGesture {
                    presented = false
                }
        )
        //.contentShape(Rectangle())
        //.onTapGesture { presented = false }
    }
}

By definition, since you're using a full screen cover, you won't be able to interact with your original button -- it'll be covered up.

In my example, I'm using the background of the modal to respond to a tap gesture to close the modal, but I've also commented out a couple of lines where you could use a contentShape on the main stack and capture the tap gesture there.