为错误消息创建一个可访问的对话框 [英] create a accessible dialog box for the error mesage

问题描述

我正在开发门户网站以使其可访问。为此，需要使动态内容可以集中。在登录页面中，身份验证错误是动态内容，在需要时无法获得焦点。编码在剃刀引擎中完成C＃

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()))
}

其中p =身份验证失败。请输入您的凭据。

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.

推荐答案

如果你想要更多的控制你可以使用，jquery ui但它的有时候文件大小不再需要，但有更多的控制和轻松的感觉

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();
    }
}

这篇关于为错误消息创建一个可访问的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！