Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS MVC jQuery dialog
I had a jquery dialog box in an MVC razor-view with a close button inside it. But on clicking the close button, the dialog just got hidden and not removed, so that when a click on any link on the page it doesnt work, which is not desired; noe do i want to redirect to my action method every time i close the dialog.
 
On clicking the 'X' button on the dialog-header, i get exactly what i want. So my senior now wants me to completely remove the 'Close' button and write "close" instead of 'X' in the header. I managed to do it editing my dialogbox thru my chrome browser console, on removing a whole lot of CSS class that the dialog-header uses.
But i cannot figure out fwhere to change the code(CSS or jquery) in my project in order to make this happen!! Please enlighten me about dialogboxes!!
 

here is my dialogbox:
 
$(function () {
 
            $.ajaxSetup({ cache: false });
            $(".ExportStatus").live("click", function (e) {
 
                e.preventDefault();
                var height = 350, width = 370;  //height = 350 width = 345;
                $('<div><span class="well"  style="position: absolute; top: 85px; left: 70px"><img src="' + loaderimagePath + '" alt="Processing your request. Please wait..." /></span></div>')
                .addClass("dialog")
                .attr("id", $(this).attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),                  
                    closeOnEscape: true,
                    resizable: false,
      //              close: $(this).attr("data-dialog-titlebar-close"),         
                    buttons: {
                        "Close": function () {
                            e.preventDefault();
                            $(".ui-dialog").remove();
                            $(".ui-widget-overlay").remove();
                        }
                    },
                    modal: true,
                    position: 'middle',
                    width: width,
                    height: height
                })              
                .load(this.href, function (response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $('.dialog').html(msg + xhr.status + "<br/>" + xhr.statusText + "<br/>" + xhr.responseText);
                    }
                });
            });
Posted 18-Nov-12 20:41pm
Comments
pratipgd at 19-Nov-12 5:11am
   
You can also suggest on how i can use improve the "Close" button, so that it closes without the page reloading but the page remains active.
 
Tried :
buttons: {
"Close": function () {
e.preventDefault();
$(".ui-dialog").remove();
$(".ui-widget-overlay").remove();
}
AND
buttons: {
"Close": function () {
e.preventDefault();
$("#modalDialog").dialog('close');
}
}
 
But they dont serve my purpose

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 George Jonsson 175
1 Kornfeld Eliyahu Peter 169
2 Zoltán Zörgő 139
3 PIEBALDconsult 130
4 OriginalGriff 120
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,107
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,342


Advertise | Privacy | Mobile
Web01 | 2.8.141220.1 | Last Updated 19 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100