El diálogo modal de jQuery se abre varias veces: javascript, jquery, asp.net-mvc, jquery-dialog

¿Me puede ayudar a entender por qué mi¿Función javascript abrir ventana emergente modal varias veces? así que si hago clic en el enlace por primera vez aparece modal, luego lo cierro y vuelvo a abrir, si quiero cerrarlo, debería presionar Cancelar dos veces, etc.

Aquí está mi código:

<script type="text/javascript">
$(function () {

$(".modal-class").click(function () {
$("#modal-popup").load(this.href, function () {
var target = document.getElementsByClassName("modal-popup")
$(target).dialog({
autoOpen: true,
closeOnEscape: true,
width: 400,
resizable: false,
title: "Login Form",
modal: true,
buttons: {
Login: function() {
// perform login
$.post("@Url.Action("Login", "User")",
{
username: $("#Email").val(),
password: $("#Password").val()
},
function() {
$(".modal-popup").dialog("close");
$("#main").load("@Url.Action("Index", "User")",
{
uniqueName: $("#Email").val()
});
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
})
return false;
});
});

Respuestas

Necesita inicializar el modelo solo una vez. Lo estás haciendo cada vez que se activa el evento click. Después de la primera inicialización, ejecute la línea de abajo para abrir el diálogo cada vez.

$(target).dialog("open");

Además, debe establecer la opción "autoOpen" en falso. De lo contrario, el modal estará abierto cuando se cargue la página.

¿Quizás el modal ya se abre al hacer clic sin su código javascript (parte de un marco)? ¿Tienes una muestra del código html también?
Prueba agregar e.PreventDefault() en la primera línea de este código javascript, vea qué sucede.

Debe colocar un style = "display: none" en el div modal-popup. Estoy bastante seguro de que es el atributo en el que opera el .dialog ("abierto").