Home > DeveloperSection > Forums > How to closed JQuery Model Popup on button clicked?
Takeshi Okada
Takeshi Okada

Total Post:89

Points:629
Posted on    February-02-2013 2:11 AM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 1170  View(s)
Rate this:

Hi Expert!

I have opened JQuery model popup, which line of code as below. I want to closed this model popup on button click. This model popup I have opened in MVC 4 project. Please help me!

<link href="@Url.Content("~/Content/pepper-grinder/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uiDialog/jquery-ui-1.8.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uiDialog/jquery.effects.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uiDialog/jquery.effects.fade.js")" type="text/javascript"></script>


<script type="text/javascript">
        $(document).ready(function () {
            $('a.ModalAttachmentList').live("click", function (event) { loadAttachmentListDialog(this, event, '#PDFListDownload'); });
        });
        function loadAttachmentListDialog(tag, event, target) {
            event.preventDefault();
            var $loading = $('<img src="../../Content/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon" style="margin: 100px 150px;">');
            var $url = $(tag).attr('href');
            var $title = $(tag).attr('title');
            var $dialog = $('<div></div>');
            $dialog
            .append($loading)
            .load($url)
              .dialog({
                  autoOpen: false
               , title: $title
               , width: 400
               , modal: true
               , minHeight: 200
               , show: 'fade'
               , hide: 'fade'
              });
            $dialog.dialog('open');
        };
    </script>

Thanks in advance.



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    February-02-2013 5:31 AM

Hi Takeshi Okada!

There are two way for closing model popup (according your code).

Fisrt one is, you can used Cancel button (for close model popup) in you JQuery code as below code

    <script type="text/javascript">
        $(document).ready(function () {
            $('a.ModalAttachmentList').live("click", function (event) { loadAttachmentListDialog(this, event, '#PDFListDownload'); });
        });
        function loadAttachmentListDialog(tag, event, target) {
            event.preventDefault();
            var $loading = $('<img src="../../Content/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon" style="margin: 100px 150px;">');
            var $url = $(tag).attr('href');
            var $title = $(tag).attr('title');
            var $dialog = $('<div></div>');
            $dialog
            .append($loading)
            .load($url)
              .dialog({
                  autoOpen: false
               , title: $title
               , width: 400
               , modal: true
               , minHeight: 200
               , show: 'fade'
               , hide: 'fade'
              });
              $dialog.dialog("option", "buttons", {
 "Cancel": function () {
                    $(this).dialog("close");
                    $(this).empty();
                }
            });
            $dialog.dialog('open');
        };
    </script>

Second one is, If you used custom Cancel button, than you try this line of code.
<script type="text/javascript">
 function CloseDialog() {
            $('#PDFListDownload').parent().dialog("close");
            $('#PDFListDownload').parent().empty();
            return false;
        }
</script>

Note: Here "PDFListDownload" is ID of Cancel button.

I hope it resolve your problem!


Don't want to miss updates? Please click the below button!

Follow MindStick