模态弹出关闭按钮在MVC项目中不起作用

时间:2018-01-24 22:39:36

标签: jquery asp.net-mvc bootstrap-modal

我想使用模式弹出窗口,我的关闭按钮不起作用。这些是以下问题。

我想在<button type="submit" id="submit">Produce</button>中使用@using (Html.BeginForm("Index", "Home", FormMethod.Post))来保存数据,并希望在点击Produce按钮时填充模式弹出窗口。

因为我能够获得模态弹出窗口,但我am not able to close the modal。如果我将button type更改为button,则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">&times;</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>

我的JavaScript代码:

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


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

    });

请帮帮我。我正在努力寻找解决方案。

1 个答案:

答案 0 :(得分:0)

使用data-dismiss属性

&#13;
&#13;
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
&#13;
&#13;
&#13;