Niranjan
Niranjan

Reputation: 587

How to remove background controls from popup?

I am developing web application in Angular 2. On button click I am trying to open popup. I am able to do it in JavaScript. I am trying now in Angular 2.

Below is my HTML code for popup inside main page.

 <button id="myBtn">Open Modal</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
        </div>

  </div>

In main page I have one text box. When I open popup inside popup text box is also displaying as below. enter image description here

Filter records text box is in html page and not in popup. Can someone help me to fix this issue? Thank you.

Upvotes: 1

Views: 126

Answers (1)

A. Bandtock
A. Bandtock

Reputation: 1241

It sounds like you've applied a high z-index to the filter records textbox and button; z-index is a styling attribute that allows you to specify which things appear in front of others, by lowering the z-index on your "Filter records" textbox/button they should sit behind the popup.

Read more on z-index here: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 1

Related Questions