HOW TO CLOSED JQUERY MODEL POPUP ON BUTTON CLICKED?

Takeshi Okada

Total Post:89

Points:629
Posted by  Takeshi Okada
JQuery 
 1599  View(s)
Ratings:
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.

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: How to closed JQuery Model Popup on button clicked?

    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!

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!