jquery - 当在最后一页上单击提交按钮时，我需要一个中心显示文字 "Thank you for your time"，以及包含绿色脸颊标记的图像

Question

我已经完成了一个完全基于 HTML 和 jQuery 的调查页面。现在下一部分是单击提交按钮时，我需要隐藏所有内容，唯一显示的应该是简单的 HTML 代码，粗体字样“谢谢你的时间”和图像。

这是我的代码...

@foreach (var i in Model)
{

        if (i.Question_Type == "DROPDOWN")
        {

        <div class="container text-center">


            <div class="row idrow" data-questions="@counter">
                @{counter++;
                }

                <div id="question1" class="form-group">
                    <label class="lab text-center" for="form-group-select">
                        @i.Question_Order @Html.Raw(@i.Question)
                    </label>
                    @{ var works = "question" + counter.ToString();}
                    <select name="@works" class="form-control selects" id="form-group-select">
                        @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                        {
                            var t = x - 1;
                            if (i.qOps != null)
                            {
                                <option> @i.qOps.options[t]</option>
                            }
                            else
                            {
                                <option> @x</option>

                            }
                        }
                    </select>
                </div>
            </div>

        </div>

        }


        if (i.Question_Type == "RADIO")
        {




        <div class="container">
            <div class="row idrow" data-questions="@counter">
                @{counter++;
                }
                <div class="form-group">
                    <label class="lab" for="questions">
                        @i.Question_Order @i.Question
                    </label>
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="question1" class="radio-inline">
                                @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                                {
                                    var t = x - 1;
                                    if (i.qOps != null)
                                    {
                                        <label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
                                    }
                                    else
                                    {

                                        <label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>

                                    }
                                }
                            </div>

                        </div>

                    </div>
                </div>


            </div>
        </div>

        }
        if (i.Question_Type == "CHECKBOX")
        {
        for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
        {
        @*<div class="container">
                <div class="row">

                    <label>@y</label>   <input type="checkbox" name="question">

                </div>
            </div>*@
        }
        }

        }
       <div class="container ">
    <div class="azibsButtons">
        <button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>

        <button type="button" id="next" class="btn btn-primary pull-right">Next</button>

        <button type="button" id="submit" onclick="Sendingitoff();" class="btn btn-primary pull-right">Submit</button>

    </div>

</div>
<div id="final">
    Thank you for your time 

</div>



        <script>
            function formToJSON() {
                var form = {};
                $('.selects').each(function () {
                    var self = $(this);
                    var name = self.attr('name');
                    if (form[name]) {
                        form[name] = form[name] + ',' + self.val();
                    }
                    else {
                        form[name] = self.val();
                    }
                });

                return form;
            }



            function Sendingitoff() {
               // debugger;
                var form = formToJSON();
                var look = JSON.stringify(form);

                $.ajax({
                    url: '@Url.Action("Answers", "GSSurvey")/' + '?username=@Request.QueryString["username"]' + '&receiverid=@Request.QueryString["receiverid"]' + '&id=@Request.QueryString["id"]',

                    type: 'POST',
                    contentType: "application/json",
                    dataType: 'json',
                    data: look,
                    success: function (data, textStatus, jqXHR) {



                    },
                    error: function (jqXHR, textStatus, errorThrown) {

                    }
                });

            }
            $(document).ready(function () {
                ShowTheelement(0);
                $("#previous").addClass('hidden');
                $("#submit").addClass('hidden');


                var dataVal = 0;

                $("#next").click(function () {
                    dataVal++;
                    $("#previous").removeClass('hidden');
                    dataVal == $(".idrow[data-questions]").length - 1 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
                    ShowTheelement(dataVal);
                    if (dataVal == $(".idrow[data-questions]").length -1 ) { 
                        $("#submit").removeClass('hidden');
                    }


                });

                $("#previous").click(function () {
                    dataVal--;
                    $("#next").removeClass('hidden');
                    dataVal == 0 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
                    ShowTheelement(dataVal);
                    if (dataVal == $(".idrow[data-questions]").length - 2)
                        $("#submit").addClass('hidden');



                });
            });

            function ShowTheelement(dataVal) {
                $(".idrow").addClass('hidden');
                $(".idrow[data-questions='" + dataVal + "']").removeClass('hidden');

            }
        </script>

Answer 1

如果我没理解错的话，您想显示 ID 为 final 的 div，在某种程度上它会占据所有内容。你可以让这个 div 开始隐藏(给它现有的类 hidden)并在表单提交后显示它，重叠在其余部分之上(就像模态)。

一种方法是:

1. 为 final div 创建一个 css 类

   .overlay {
    position:fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
   }
   

2. 默认隐藏

   <div id="final" class="hidden"> Thank you for your time </div>
   

3. 然后，在您的 ajax 调用成功之后:

   success: function (data, textStatus, jqXHR) {
    /*do what you need with the data*/
    $("#final").addClass('overlay');
   }
   

   请记住，这会占据您的整个屏幕，因此您应该考虑使用计时器来关闭它或使用关闭按钮来隐藏它。