jquery attributes control and button click

Question

   <script type="text/javascript">
        $(function () {
            $('form').submit(function () {
                $.ajax({

                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#popUp').html(result);
                    }
                });
                return false;
            });
        });
</script>
 <script type="text/javascript">
     $(function () {
         $('form').submit(function () {
             $("#popUp").dialog(
             {
                title: $(this).attr("data-dialog-title"),
                 minWidth: 500,




             );

         });
     });


    </script>

The above code gave a pop up box for button click in the insert page, but How can I control the attributes of the popup box such as resizable, modal:true,false, also how can I close this popup by a button click from another partial view called _error.

Answer 1

This should work, as it did for me, enter this script in your page or create a test page so you can play with it a bit:

<script>
        $("#dialog-confirm").dialog({
            resizable: true,
            height: 340,
            width: 600,
            autoOpen: false,
            modal: true,

            buttons: {
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

</script>

Which should manipulate a div similar to this which should be in your page:

<div id="dialog-confirm" title="Confirm?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        Confirm.<br />
        <div class="preview">
            Message...

        </div>
        <br />Confirm?</p>
</div>

I located this using the dialog documentation at http://www.jquery.com

You can change the name of the button by replacing it with whatever you seem fit like so:

Cancel: function () {
    $(this).dialog("close");
}

becomes:

"New value here": function () {
    $(this).dialog("close");
});