Reputation: 865

Display panel over another panel for web app

I was looking for an answer, but could not find anything helpfull yet.

I have a gridview with some data (from SQL database) and an option to delete a row. Before deleting the row I want the user to confirm the delete (pupup window). I know how to create a popup with javascript, but I don't like the apperance of that popup. I would like to make ky own "popup".

I was thinking of overlaying one panel (where I put text (Label) and some buttons (OK, Cancel)) over the panel where I have the gridview. Something like in the picture. How would I accomplish something like that?

enter image description here

Upvotes: 0

Answers (3)

Jupaol

Reputation: 21365

Use the jQuery UI dialog

Example:

<script type="text/javascript">
    $(function () {
        var $dialog = $("#dialog");
        var $foo = $("input:submit[id$=foo]");
        var confirmed = false;

        $dialog.hide();

        $dialog.dialog({
            width: "300px",
            modal: true,
            autoOpen: false,
            buttons: {
                OK: function (e) {
                    $dialog.dialog("close");
                    confirmed = true;
                    $foo.click();
                },
                Cancel: function (e) {
                    $dialog.dialog("close");
                    confirmed = false;
                }
            }
        });

        $foo.click(function (e) {
            if (!confirmed) {
                $dialog.dialog("open");
            }

            return confirmed;
        });
    });
</script>

Full working example can be downloaded from here

Upvotes: 0