I was thinking of making use of a pop-up form to handle a settings screen and/or a status display screen, what mechanisms does QuestJS and JQuery have for pop-up forms like this?

There are some good examples in the Wiki for this, I'd start with this page, since it seems the closest to what you're asking about, but you'll find lots of useful information in the other related pages under the Dialogue Boxes and Other Elements headings.
https://github.com/ThePix/QuestJS/wiki/Adding-a-toolbar

Would this also suit a pop-up form to add item objects to the game with editable details like a character creation screen?

Yes, that's how I would recommend implementing a character creation screen. There is a page in the wiki specifically about adding a character creation screen, although that implementation is more complicated.
https://github.com/ThePix/QuestJS/wiki/Character-Creation

Hmm, I need to have a delayed one so I can call it to create a secondary character NPC with a name and other attributes besides the main player one at the start, it seems settings.setUpDialog() just ties back to the settings.startingDialog stuff right? Which is only going to have one setup for the main player.

In that case, io.dialog(widgets)fits your needs even better, since you can call it at any point.
https://github.com/ThePix/QuestJS/wiki/user-Input#dialog-input

I'll certainly take a look at that when I can, thanks! I actually took a dive into how the settings character creator worked and made a manually opened "#dialog" form that worked the same way and could be called any time I liked, but got frustrated that it only had an OK button on the pop-up and no cancel.

So I spent a while finding everything I needed from the Index.html and the default.css in order to make a duplicate version I called "#dialogueOKCancel" that had a controllable Cancel button as well as an OK button so I could make changes with the OK one and undo with the Cancel.

Index.html inside the < body> underneath the other dialog

    <dialog id="dialogOKCancel">
        <form method="dialog">
            <h4 id="dialogOKCancel-title"></h4>
            <hr />
            <div id="dialogOKCancel-content"></div>
            <div id="dialogOKCancel-footer" style="text-align:right">
                <hr />
                <button id="dialogOKCancel-OKButton" value="default">OK</button>
                <button id="dialogOKCancel-CancelButton" value="default">Cancel</button>
            </div>
        </form>
    </dialog>

style.css to format the look of the new dialogOKCancel in the same way dialog is in the default.css

#dialogOKCancel {
    display: none;
    z-index: 10;
    position: fixed;
}

#dialogOKCancel p {
    padding: 10px 0px 10px 0px;
    text-align: justify;
}

A custom button just to popup and display and allow change the player info after the settings setup it up at the start of the game

createItem("PlayerInfo", {
    alias: "Player Info",
    loc: "lounge",
    hereVerbs: ["Interact"],
    examine: "A machine for displaying the player information",
    interact: function () {
        displayPlayerInfo()
        msg("<a href=\"javascript:void(0);\" onclick=\"settings.setUpDialog()\">Change?</a>")
    },
})

function displayPlayerInfo() {

    const diag = document.querySelector("#dialogOKCancel")
    document.querySelector("#dialogOKCancel-title").innerHTML = "Change Player Info"

    let playerInfoHtml = ''
    playerInfoHtml += '<p> Name: <input id="CPIName" type="text" value="' + player.alias + '"/></p>'
    playerInfoHtml += '<p>Species: <input id="CPISpecies" type="text" value="' + player.species + '"/></p>'
    playerInfoHtml += '<p>Gender: <select id="CPIGender">'
    for (const s of settings.genders) {
        if (s.name === player.gender) {
            playerInfoHtml += '<option value="' + s.name + '" selected>' + s.name + '</option>'
        }
        else {
            playerInfoHtml += '<option value="' + s.name + '">' + s.name + '</option>'
        }
    }
    playerInfoHtml += '</select></p>'

    console.log("Change Player Info Diag Style - " + diag.style)

    document.querySelector("#dialogOKCancel-content").innerHTML = playerInfoHtml
    document.querySelector("#dialogOKCancel-OKButton").addEventListener('click', function () { changePlayerInfoOKClick(diag); })
    document.querySelector("#dialogOKCancel-CancelButton").addEventListener('click', function () { changePlayerInfoCancelClick(diag);})
    diag.style.display = 'block'
    diag.style.width = 500 + 'px'
    diag.style.height = 'auto'
    diag.style.top = '100px'

    io.disable()
    diag.show()
}

function changePlayerInfoOKClick(diag) {
    changePlayerInfoOnClick()
    io.enable()
    document.querySelector('#textbox').focus()
    document.querySelector("#dialogOKCancel").style.display = 'none'
}

function changePlayerInfoCancelClick(diag) {
    io.enable()
    document.querySelector('#textbox').focus()
    document.querySelector("#dialogOKCancel").style.display = 'none'
}

function changePlayerInfoOnClick() {
    player.species = document.querySelector("#CPISpecies").value
    player.gender = document.querySelector("#CPIGender").value
    player.setAlias(document.querySelector("#CPIName").value)
}

code.js the command for the Interact verb on the button

commands.unshift(new Cmd('interact', {
    regex: /^(?:interact) (.+)$/,
    objects: [
        { scope: parser.isHere },
    ],
    default: function (item) {
        msg("You can't do that...")
        return false
    },
}))