Модальная всплывающая кнопка закрытия не работает в проекте MVC

---

Я хочу использовать модальное всплывающее окно, где мой

close

кнопка не работает. Это следующие проблемы.

Я хочу использовать

<button type="submit" id="submit">Produce</button>

внутри дома

@using (Html.BeginForm("Index", "Home", FormMethod.Post))

чтобы сохранить данные, а также хотите заполнить модальное всплывающее окно на этом

Produce

нажатие кнопки.

Как я могу получить модальное всплывающее окно, но я не в состоянии

close

модальный. Если я изменю тип кнопки на кнопку, то кнопка закрытия будет работать. Но я хочу, чтобы тип

Submit

.

Я попробовал сделать следующий код, но пока безуспешно. Я борюсь уже 2 дня. У кого-нибудь есть какие-то идеи, пожалуйста, поделитесь ими. Спасибо.

Что я уже пробовал:

//My form

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {   
       @Html.TextBoxFor(m => m.txtName)
       <button type="submit" id="submit">Produce Page</button>      
    } 



 //My Modal

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        ...
                <div class="modal-header">
                    ...
<button type="button" class="close" onclick="CloseModalPopup();" aria-label="Close">
   <span aria-hidden="true">×</span>
      </button>
     </div>
                <div class="modal-body">
                        ...
                    </div>

 <div class="modal-footer">
<button type="button" onclick="CloseModalPopup();">Close</button>
<button type="button"><a href="~/MyHome/MyHome">Go to My Home</a></button>
        </div>
  </div>

My JavaScript code:

  $(function () {
        $('#submit').click(function () {
              var value = $('#txtName').val();
               if (value) {
                   $("#myModal").modal('show');              
                }          
        });
});


 function CloseModalPopup() {       
            $("#myModal").modal('hide');
    }

    });

---