Modal popup close button is not working in MVC project

See more:

MVC

jQuery

bootstrap

I want to use modal popup where my

close

button is not working. These are the following concerns.

I want to use

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

inside the

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

to save the data and also want to populate modal popup upon this

Produce

button click.

As I am able to get the modal popup but I am not able to

close

the modal. If I change the button type to button then close button works. But I want type to

Submit

.

I tried the following code to do but no luck so far. I am struggling since 2 days. Anyone have any ideas then please share. Thank you.

What I have tried:

//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');
    }

    });