forum

Home / DeveloperSection / Forums / How to closed JQuery Model Popup on button clicked?

Ask Question

How to closed JQuery Model Popup on button clicked?

Takeshi Okada261602-Feb-2013

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.

jqueryjquery 
Updated on 02-Feb-2013
Takeshi Okada

Takeshi Okada

Follow

Can you answer this question?

Answer

1 Answers

AVADHESH PATEL

AVADHESH PATEL

02-Feb-2013

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!

Liked By