-2

我想知道在弹出对话框之前如何或应该做什么来实现加载图像？任何 gif 都可以。我应该在我的函数中添加什么函数或代码行？

------------我的jQuery代码：------------

 $(".red_img").click(function() {

                });

                $("#red_form").dialog({

                        modal:true,
                        buttons: {
                            "Done": function() {


                            },
                            Cancel: function() {
                                $(this).dialog("close");
                            }
                        }
                });
                $("#red_form").show(500);
            });
4

2 回答 2

1

我希望您在弹出对话框之前正在寻求进度指示器的解决方案，以显示加载弹出窗口的进度，如果是，那么这里是您如何与模态一起实现此进度指示器的方法。

步骤1。

我采用了一个简单的面板，在其中插入了一个图像，“正在加载请稍候...”是我要显示的文本。我已将面板的位置设置为屏幕上我想要的位置

<asp:Panel ID="ProgressIndicatorPanel" runat="server" Style="display: none" CssClass="modalPopup">
        <div id="ProgressDiv" class="progressStyle">
            <ul class="ProgressStyleTable" style="list-style:none;height:60px">
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em">
                    <asp:Image ID="ProgressImage" runat="server" SkinID="ProgressImage" />
                </li>
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em;margin-right:0.5em">
                    <span id="ProgressTextTableCell"> Loading, please wait... </span>
                </li>
            </ul>
        </div>
    </asp:Panel>

第 2 步 因为我想在进度指示器显示期间禁用其余的屏幕功能，所以我使用了一个模态对话框，如下所示。

<asp:ModalPopupExtender ID="Progress_ModalPopupExtender" runat="server" ClientIDMode="Static" BehaviorID="ProgressModalPopupBehaviour"
        PopupControlID="ProgressIndicatorPanel" TargetControlID="DummyDialogButton" BackgroundCssClass="ModalPopupBG" 
        RepositionMode="RepositionOnWindowResizeAndScroll" Drag="false" DropShadow="true">
    </asp:ModalPopupExtender>

第 3 步

现在你需要通过包含这个 $("#ProgressImage").show(); 来编写 Javascript 函数。

于 2012-09-17T05:25:08.637 回答
1

您可以在单击事件开始时显示加载图像，然后在显示对话框之前隐藏图像：

// Initially, your loading image must be hidden
$("#your_loading_image").hide();

$(".red_img").click(function() {
    var red_type = $(this).attr("title").trim();

    // Display your loading image here -----------------------------
    $("#your_loading_image").show();

    $.ajax({
        url: "get_attributes.php",
        type: "post",
        datatype: "json",
        data: {wtype: red_type},
        success: function(data) {
            var toAppend = '';
            if(typeof data === "object"){
                toAppend += "<tbody>";
                toAppend += "<tr></td><td class=datalabel>Type:</td><td>"+data['type']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Health:</td><td>"+data['health']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Attack:</td><td>"+data['attack']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Defense:</td><td>"+data['defense']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Speed:</td><td>"+data['speed']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Evade:</td><td>"+data['evade']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Special:</td><td>"+data['special']+"</td></tr>";
                toAppend += "</tbody>";
                $("tbody").remove();
                $("#red_form table").append(toAppend);
            }
        }
    });

    $("#red_form #name").val($(this).attr("alt").trim());

    // Hide your loading image here --------------------------------
    $("#your_loading_image").hide();

    $("#red_form").dialog({
        width:300,
        resizable:false,
        modal:true,
        buttons: {
            "Done": function() {

                if($("#red_form #name").val().trim()==''){
                    alert("Text field cannot be empty.");
                    $("#red_form #name").focus();
                }
                else if($("#red_form #name").val().trim()===$("#blue_name").val().trim()){
                    alert("Name cannot be the same by other player.");
                    $("#red_form #name").focus();
                }
                else {
                    $("#red_name").val($("#red_form #name").val().trim());
                    $("#red_type").val(red_type);
                    $("#red_form").hide(400);
                    $(this).dialog("close");
                }
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
    $("#red_form").show(500);
});

您的加载图像在哪里#your_loading_image，例如：

<img id="your_loading_image" src="your_loading_image_path.gif"/>
于 2012-09-17T05:02:20.407 回答