使用jquery关闭模式弹出窗口时刷新页面

我的问题：

<div class="container">
<!-- <form name="" id="" action="" method="get"> -->
<!-- Trigger the modal with a button -->
  <div class="col-md-2 col-md-offset-5">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="margin:0 auto;">Request a Demo</button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">  
    <div class="modal-dialog" id="idmodaldialog">    
      <!-- Modal content-->
      <form name="frmdemo" id="idfrmdemo" method="post">
      <div class="modal-content">        
         <div class="modal-header" align="center">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><strong>Request a Demo</strong></h4>
        </div>
        <div class="modal-body" id="idmodalcontent">                         
             <div class="row">
             <div class="form-group col-md-6">
             <label for="txtfirstname">FIRST NAME</label>
             <input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
             </div>
             <div class="form-group col-md-6">
             <label for="txtlastname">LAST NAME</label>
             <input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">            
             </div>           
             </div>             
             <div class="form-group">
             <label for="Email">EMAIL</label>
             <input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
             <div class="divstyle">(Please enter your email id in block letters)</div>
             </div>             
             <div class="form-group">
             <label for="idcompany">COMPANY</label>
             <input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
             </div>             
             <div class="form-group">
             <label for="Phone">PHONE</label>
             <input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">             
             </div>
            <div class="form-group">
             <label for="">MODE OF CONTACT</label>
             <select name="selmode" id="idmode" class="form-control">
              <option value="">Select</option>
              <option value="email">Email</option>
            <option value="phone">Phone</option>  
            </select>
             </div>         
         </div>
        <div class="modal-footer">
          <input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
        </div>
      </div>
      </form> 
    </div>
  </div> 
</div>

我有一个模式表单，当我点击提交按钮时会弹出。模式表单允许用户填写一组字段，并向组织请求演示。然后使用codeigniter将表单数据插入mysql数据库。当用户提交已验证的表单时，模式弹出窗口仅显示一条成功消息和一个动态生成的按钮（替换以前的表单），允许用户关闭模式表单

当我点击动态生成的close按钮时，模式表单关闭并刷新页面

但是，当我单击模式表单右上角的关闭图标时，我无法执行相同的操作（刷新页面）。

// Wait for the DOM to be ready
$(function() {  

    $('#mymodal').on("hidden", function() {
          location.reload();;
         });    

    $('#idphone').mask('(000) 000-0000');

    // Initialize form validation on the registration form.
  // It has the name attribute "frmdemo"
  $("form[name='frmdemo']").validate({
    // Specify validation rules 
      rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      "txtfirstname": {required:true,firstnameval:true},
      "txtlastname": {required:true,lastnameval:true},
      "txtemail": {
        required: true,        
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true,
        emailval:true 
      },
      "txtcompany": {
          required: true,
          companyval:false    
      },

      "txtphone" : {
         required : true,
         usphoneval:true 
      },   

      "selmode" :{
         required : true 
      } 
    },
    // Specify validation error messages
    messages: {
      txtfirstname: {
          required:"Please enter your first name" ,
          firstnameval:"Enter proper first name"
          //firstnameval:"Enter only alphabets ",         
            },
     txtlastname: {
                  required:"Please enter your last name " ,
                  lastnameval:"Enter proper last name"
                  //firstnameval:"Enter only alphabets ",         
                    },    
      txtemail: {
                  required : "Please enter a valid email address",     
                  emailval : "Please enter your corporate email id"       
      },     
      txtcompany: {
          required :"Please enter the name of your company",
          companyval:"Enter a proper company name"
      },         
      txtphone: {
          required :"Please enter your phone number",
          usphoneval :"Please enter a valid phone number"  
      },
         selmode:"Please select the mode in which we should contact you"
    },

    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid  

    submitHandler: function(form) {
       // form.submit();
      $('#idmodalcontent').html('Form submitted successfully');

      var input = $('<input/>').attr({ type: 'button', name:'btnsubmit', value:'Close', id:'idclose',"class":"btn btn-warning"});    

      //"data-dismiss":'modal',

      $(".modal-footer").html(input);

      $("#idclose").on("click",function(){
         location.reload();
        });              

      /*$('#idmodalcontent').modal({
              onClose: function(dialog){
                location.reload(true);
            }
        }); 
      */
      return false;        
    }        
  });


//add your own custom validation rule

  //US phone format
    $.validator.addMethod("usphoneval", function(value,element)
    {       
        //^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$

        if (/^\(?([0-9]{3})\)?[ ]?([0-9]{3})[-]?([0-9]{4})$/.test(value)) 
        {
            return true;

        } else {

            return false;           
        }       

    },function() 
    { 
    });


    //first name : only alphabets
    $.validator.addMethod("firstnameval", function(value,element)
            {       
                //^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$

                if (/^[a-zA-Z]{1,256}$/.test(value)) 
                {
                    return true;

                } else {

                    return false;           
                }       

            },function() 
            { 
            });

    $.validator.addMethod("lastnameval", function(value,element)
            {       

                //first character alphabet - rest alphanumeric
                if (/^[a-zA-Z][a-zA-Z0-9]{0,256}$/.test(value)) 
                {

                    return true;


                } else {

                    return false;
                }       

            },function() 
            {           
            });

    //validate company - first character alphabet,rest only alphabet,dot,spaces
    $.validator.addMethod("companyval", function(value,element)
            {       
                if (/^[a-zA-Z][a-zA-Z. ]{1,256}$/.test(value)) 
                {
                    return true;                    

                } else {

                    return false;
                }       

            },function() 
            { 
            });     

    $.validator.addMethod("emailval", function(value,element)
            {       

            var n = value.lastIndexOf('@');
            var extension = value.substring(n+1).toLowerCase();
            if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"                  
            || extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
            || extension=="live.com"    || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"     
            || extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"                
            || extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
            || extension=="gmx.net" || extension=="hush.com" ) {

                return false ;

            } else {

                return true;

            }

            },function() 
            { 
            }); 
});

我尝试过使用以下代码，但无法在模式弹出窗口的关闭事件中刷新页面

$('#mymodal').on("hidden", function() {
          location.reload();;
         });

我还尝试使用以下代码：

$('#mymodal').on("hidden.bs.modal", function() {
              location.reload();;
             });

我使用了jquery.mask.js和jquery.validate.min.js对模式表单进行表单验证

我的研究：

<div class="container">
<!-- <form name="" id="" action="" method="get"> -->
<!-- Trigger the modal with a button -->
  <div class="col-md-2 col-md-offset-5">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="margin:0 auto;">Request a Demo</button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">  
    <div class="modal-dialog" id="idmodaldialog">    
      <!-- Modal content-->
      <form name="frmdemo" id="idfrmdemo" method="post">
      <div class="modal-content">        
         <div class="modal-header" align="center">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><strong>Request a Demo</strong></h4>
        </div>
        <div class="modal-body" id="idmodalcontent">                         
             <div class="row">
             <div class="form-group col-md-6">
             <label for="txtfirstname">FIRST NAME</label>
             <input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
             </div>
             <div class="form-group col-md-6">
             <label for="txtlastname">LAST NAME</label>
             <input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">            
             </div>           
             </div>             
             <div class="form-group">
             <label for="Email">EMAIL</label>
             <input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
             <div class="divstyle">(Please enter your email id in block letters)</div>
             </div>             
             <div class="form-group">
             <label for="idcompany">COMPANY</label>
             <input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
             </div>             
             <div class="form-group">
             <label for="Phone">PHONE</label>
             <input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">             
             </div>
            <div class="form-group">
             <label for="">MODE OF CONTACT</label>
             <select name="selmode" id="idmode" class="form-control">
              <option value="">Select</option>
              <option value="email">Email</option>
            <option value="phone">Phone</option>  
            </select>
             </div>         
         </div>
        <div class="modal-footer">
          <input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
        </div>
      </div>
      </form> 
    </div>
  </div> 
</div>

我已经讨论了以下有关堆栈溢出的问题：

我的模态形式：

<div class="container">
<!-- <form name="" id="" action="" method="get"> -->
<!-- Trigger the modal with a button -->
  <div class="col-md-2 col-md-offset-5">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="margin:0 auto;">Request a Demo</button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">  
    <div class="modal-dialog" id="idmodaldialog">    
      <!-- Modal content-->
      <form name="frmdemo" id="idfrmdemo" method="post">
      <div class="modal-content">        
         <div class="modal-header" align="center">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><strong>Request a Demo</strong></h4>
        </div>
        <div class="modal-body" id="idmodalcontent">                         
             <div class="row">
             <div class="form-group col-md-6">
             <label for="txtfirstname">FIRST NAME</label>
             <input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
             </div>
             <div class="form-group col-md-6">
             <label for="txtlastname">LAST NAME</label>
             <input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">            
             </div>           
             </div>             
             <div class="form-group">
             <label for="Email">EMAIL</label>
             <input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
             <div class="divstyle">(Please enter your email id in block letters)</div>
             </div>             
             <div class="form-group">
             <label for="idcompany">COMPANY</label>
             <input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
             </div>             
             <div class="form-group">
             <label for="Phone">PHONE</label>
             <input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">             
             </div>
            <div class="form-group">
             <label for="">MODE OF CONTACT</label>
             <select name="selmode" id="idmode" class="form-control">
              <option value="">Select</option>
              <option value="email">Email</option>
            <option value="phone">Phone</option>  
            </select>
             </div>         
         </div>
        <div class="modal-footer">
          <input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
        </div>
      </div>
      </form> 
    </div>
  </div> 
</div>

请求演示
&时代；
请求演示
名字
姓
电子邮件
（请用正楷输入您的电子邮件id）
公司
电话
接触方式
挑选
电子邮件
电话

我的Jquery表单验证代码：

// Wait for the DOM to be ready
$(function() {  

    $('#mymodal').on("hidden", function() {
          location.reload();;
         });    

    $('#idphone').mask('(000) 000-0000');

    // Initialize form validation on the registration form.
  // It has the name attribute "frmdemo"
  $("form[name='frmdemo']").validate({
    // Specify validation rules 
      rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      "txtfirstname": {required:true,firstnameval:true},
      "txtlastname": {required:true,lastnameval:true},
      "txtemail": {
        required: true,        
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true,
        emailval:true 
      },
      "txtcompany": {
          required: true,
          companyval:false    
      },

      "txtphone" : {
         required : true,
         usphoneval:true 
      },   

      "selmode" :{
         required : true 
      } 
    },
    // Specify validation error messages
    messages: {
      txtfirstname: {
          required:"Please enter your first name" ,
          firstnameval:"Enter proper first name"
          //firstnameval:"Enter only alphabets ",         
            },
     txtlastname: {
                  required:"Please enter your last name " ,
                  lastnameval:"Enter proper last name"
                  //firstnameval:"Enter only alphabets ",         
                    },    
      txtemail: {
                  required : "Please enter a valid email address",     
                  emailval : "Please enter your corporate email id"       
      },     
      txtcompany: {
          required :"Please enter the name of your company",
          companyval:"Enter a proper company name"
      },         
      txtphone: {
          required :"Please enter your phone number",
          usphoneval :"Please enter a valid phone number"  
      },
         selmode:"Please select the mode in which we should contact you"
    },

    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid  

    submitHandler: function(form) {
       // form.submit();
      $('#idmodalcontent').html('Form submitted successfully');

      var input = $('<input/>').attr({ type: 'button', name:'btnsubmit', value:'Close', id:'idclose',"class":"btn btn-warning"});    

      //"data-dismiss":'modal',

      $(".modal-footer").html(input);

      $("#idclose").on("click",function(){
         location.reload();
        });              

      /*$('#idmodalcontent').modal({
              onClose: function(dialog){
                location.reload(true);
            }
        }); 
      */
      return false;        
    }        
  });


//add your own custom validation rule

  //US phone format
    $.validator.addMethod("usphoneval", function(value,element)
    {       
        //^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$

        if (/^\(?([0-9]{3})\)?[ ]?([0-9]{3})[-]?([0-9]{4})$/.test(value)) 
        {
            return true;

        } else {

            return false;           
        }       

    },function() 
    { 
    });


    //first name : only alphabets
    $.validator.addMethod("firstnameval", function(value,element)
            {       
                //^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$

                if (/^[a-zA-Z]{1,256}$/.test(value)) 
                {
                    return true;

                } else {

                    return false;           
                }       

            },function() 
            { 
            });

    $.validator.addMethod("lastnameval", function(value,element)
            {       

                //first character alphabet - rest alphanumeric
                if (/^[a-zA-Z][a-zA-Z0-9]{0,256}$/.test(value)) 
                {

                    return true;


                } else {

                    return false;
                }       

            },function() 
            {           
            });

    //validate company - first character alphabet,rest only alphabet,dot,spaces
    $.validator.addMethod("companyval", function(value,element)
            {       
                if (/^[a-zA-Z][a-zA-Z. ]{1,256}$/.test(value)) 
                {
                    return true;                    

                } else {

                    return false;
                }       

            },function() 
            { 
            });     

    $.validator.addMethod("emailval", function(value,element)
            {       

            var n = value.lastIndexOf('@');
            var extension = value.substring(n+1).toLowerCase();
            if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"                  
            || extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
            || extension=="live.com"    || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"     
            || extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"                
            || extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
            || extension=="gmx.net" || extension=="hush.com" ) {

                return false ;

            } else {

                return true;

            }

            },function() 
            { 
            }); 
});

//等待DOM准备就绪
$（函数（）{
$（'#mymodal'）。在（“隐藏”，函数（）上）{
location.reload（）；；
});    
$（'idphone'）。掩码（'000）000-0000'）；
//初始化注册表上的表单验证。
//它具有name属性“frmdemo”
$（“表单[name='frmdemo']）。验证({
//指定验证规则
规则：{
//左侧的键名称是name属性
//已定义验证规则
//在右边
“txtfirstname”：{required:true，firstnameval:true}，
“txtlastname”：{required:true，lastnameval:true}，
“txtemail”：{
要求：正确，
//指定应验证的电子邮件
//根据内置的“电子邮件”规则
电子邮件：是的，
是的
},
“TXT公司”：{
要求：正确，
公司瓦尔：错
},
“txtphone”：{
要求：正确，
美国药典：对
},   
“选择模式”：{
必填项：true
} 
},
//指定验证错误消息
信息：{
txtfirstname：{
必填：“请输入您的名字”，
firstnameval：“输入正确的名字”
//firstnameval：“仅输入字母表”，
},
txtlastname：{
必填：“请输入您的姓氏”，
lastnameval：“输入正确的姓氏”
//firstnameval：“仅输入字母表”，
},    
特快专递：{
必填：“请输入有效的电子邮件地址”，
emailval：“请输入您的公司电子邮件id”
},     
TXT公司：{
必填：“请输入您的公司名称”，
companyval：“输入正确的公司名称”
},         
TXT电话：{
必填：“请输入您的电话号码”，
usphoneval：“请输入有效的电话号码”
},
selmode：“请选择我们联系您的方式”
},
//确保表单已提交到定义的目标
//有效时，在窗体的“action”属性中
submitHandler:函数（表单）{
//表单提交（）；
$（'#idmodalcontent'）.html（'表单提交成功'）；
var input=$（''）.attr（{type:'button'，name:'btnsubmit'，value:'Close'，id:'idclose'，class:“btn btn warning”}）；
//“数据解除”：“模态”，
$（“.modal footer”）.html（输入）；
$（“#idclose”）。在（“单击”，函数（）上）{
location.reload（）；
});              
/*$（'#idmodalcontent'）.modal({
onClose：函数（对话框）{
位置。重新加载（true）；
}
}); 
*/
返回false；
}        
});
//添加您自己的自定义验证规则
//美国电话格式
$.validator.addMethod（“usphoneval”，函数（值，元素）
{       
//^\（？（[d]{3}）\）？[.]（[d]{3}）[.]？（[d]{4}）$
如果（/^\（（[0-9]{3}）\）？[]？（[0-9]{3}）[-]？（[0-9]{4}）$/.test（value））
{
返回true；
}否则{
返回false；
}       
}，函数（）
{ 
});
//名字：仅字母表
$.validator.addMethod（“firstnameval”，函数（值，元素）
{       
//^\（？（[d]{3}）\）？[.]（[d]{3}）[.]？（[d]{4}）$
if（/^[a-zA-Z]{1256}$/.test（value））
{
返回true；
}否则{
返回false；
}       
}，函数（）
{ 
});
$.validator.a