create a accessible dialog box for the error mesag

Question

I am working on a portal to make it accessible. For that it is required to make dynamic content focusable. In the login page, the Authentication error is dynamic content which is not getting focus when needed. Coding is done in razor engine C#

@if (TempData["error"] != null)
{
@Html.Raw(Resources.Strings.ResourceManager.GetString(TempData["error"].ToString()))
}

Where p="Authentication failed. Renter your Credentials."

In other attempt I had put it in alert box like this-

@if (TempData["error"] != null)
{
<script> alert("'[e-mail](Resources.Strings.ResourceManager.GetString(TempData["error"].ToString())) +'");
</script>
 }

but it is not upto my expectation I need to customize it. So I am searching for the answer to providing a customizing popup box in place of this.

Is there any way to give focus on it by putting the error message in form of some dialog box. Or any other way of showing error message which is focusable.

Answer 1

If you want more control you can use, jquery ui but its again sometime unnecessary with file size but have more control and easy feeling

function openConfirm() {
    var html = ''
        + '<div id="dvConfirm">'
        + '<div class="editor-main">'
        + '    <h6>'
        + '        @Html.Raw(TempData["error"].ToString())'
        + '    </h6>'
        + '</div>'
        + '<p class="continue_userprof">'
        + '    <input type="submit" value="Continue" onclick="onConfirmClick();" />'
        + '</p>'
        + '</div>';

    var div = $(html);


    div.dialog({
        title: "Title",
        close: destroy_this_dialog,
        height: 245,
        width: 420,
        modal: true,
        draggable: true
    });

    function destroy_this_dialog(event, ui) {
        $(this).dialog("destroy");
        $(this).remove();
    }
}