javascript - Misplaced modal Dialog box action URL to main page URL(blackedout) error

one text

Thanks for your time.

Everything goes well as planned with testcafe. But am unable to figured the issue which am facing--i opened a modal-dialog box(it should be pop up window-- which has some info form filled and save it). which i had already solved it -- but here action URL is confusing the testcafe

HTML below shows..

.

When i run it, the modal dialog opened and replaced(in 2s) as main page URL with black and white window and executed (with out saving- because div element different).

how can open my modal dialog as popup window and fill the form and save it.
How can close the window (can see the image- class=btn btn-white", here there is no name field as save-item button.

my code testcafe code (problem lays)

export async function test() {
   // open urls by click functions here
//required page was opened and searching the user exists or not
    const searchUserExists = 'user1'
    await t.typeText('[type="search"]', searchUserExists);

    const firstNameUser = "UserFirstName"
    const lastNameUser = "UserLastName"
    const emailUser = "moderator@moderator.de"
    await t.debug().click(' #ent_administration_user_new, .modal-body, 
    [action="null"]')  // worked

**here problem comes**

    await t.typeText(Selector("#user_firstname"), firstNameUser)
        .typeText(Selector("#user_lastname"), lastNameUser)
        .typeText(Selector("#user_username"), searchUserExists)
        .typeText(Selector("#user_email"), emailUser)
        .click(".save-item");
}

I also want to solve in testcafe code rather than in css file or html

Using by JS and PHP.

Source