---
title: "How to closed JQuery Model Popup on button clicked?"  
description: "How to closed JQuery Model Popup on button clicked?"  
author: "Takeshi Okada"  
published: 2013-02-02  
updated: 2013-02-02  
canonical: https://www.mindstick.com/forum/567/how-to-closed-jquery-model-popup-on-button-clicked  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# How to closed JQuery Model Popup on button clicked?

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances)!

I have opened JQuery [model popup](https://www.mindstick.com/forum/34333/how-i-can-call-a-model-popup-with-data-by-using-jquery-in-mvc), which line of code as below. I want to closed this model popup on [button click](https://www.mindstick.com/forum/790/form-gets-submiited-twice-on-button-click). This model popup I have opened in MVC 4 project. Please help me!

<link href="@Url.[Content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand)("~/Content/pepper-grinder/jquery.ui.all.css")" rel="stylesheet" type="text/css" />\
<[script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line) src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/[javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-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](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {\
$('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](https://www.mindstick.com/forum/562/jquery-dialog-box-not-closed-in-asp-dot-net-mvc-4) = $('<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.

## Replies

### Reply by AVADHESH PATEL

Hi Takeshi Okada!

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

Fisrt one is, you can used Cancel [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) (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!


---

Original Source: https://www.mindstick.com/forum/567/how-to-closed-jquery-model-popup-on-button-clicked

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.