Dialog

These functions are meant as a nicer alternative to the native alert, confirm and prompt functions. They are not meant to be used as a replacement for more complex modals.

Functions

Verify

<button type="button" class="btn blue-btn-soft-secondary" onclick="verifyUser()">Verify</button>

<script>
    async function verifyUser() {
        const yesOrNo = await blueWeb.dialog.verify("Do you want to continue?")
        await blueWeb.dialog.tell(yesOrNo ? "You clicked yes" : "You clicked no")
    }
</script>

Tell

<button type="button" class="btn blue-btn-soft-secondary" onclick="tellUser()">Tell</button>

<script>
    async function tellUser() {
        await blueWeb.dialog.tell("A message for you")
    }
</script>

Ask

<button type="button" class="btn blue-btn-soft-secondary" onclick="askUser()">Ask</button>

<script>
    async function askUser() {
        const answer = await blueWeb.dialog.ask("What is the question?", {
            title: "Question"
        })
        await blueWeb.dialog.tell("You asked: " + answer)
    }
</script>

Ask with default value

<button type="button" class="btn blue-btn-soft-secondary" onclick="askUserWithDefaultValue()">Ask</button>

<script>
    async function askUserWithDefaultValue() {
        const answer = await blueWeb.dialog.ask(
            "What is your name?",
            `{"title":"Save Query","defaultValue":"DEFAULT LGK"}`
        )
        await blueWeb.dialog.tell("You asked: " + answer)
    }
</script>

Control dialog by ID

<button type="button" class="btn blue-btn-soft-secondary" onclick="openControlledTellDialog()">
    Open controlled dialog
</button>

<script>
    async function openControlledTellDialog() {
        setTimeout(() => {
            document.getElementById("myControlledDialog").close()
        }, 3000)
        await blueWeb.dialog.tell("Dialog will close after a few seconds.", { id: "myControlledDialog" })
    }
</script>