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

Code

<button id="verify_button" type="button" class="btn blue-btn-soft-secondary">Verify</button>

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

Tell

Code

<button id="tell_button" type="button" class="btn blue-btn-soft-secondary">Tell</button>

<script>
    tell_button.addEventListener("click", async () => {
        await blueWeb.dialog.tell("A message for you")
    })
</script>

Ask

Code

<button id="ask_button" type="button" class="btn blue-btn-soft-secondary">Ask</button>

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

Ask with default value

Code

<button id="ask_button2" type="button" class="btn blue-btn-soft-secondary">Ask</button>

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

Edit post on GitHub