모달 안에 폼 요소

Question

모달 안에 로그인 양식을 넣고 제출 버튼에 data-dismiss = "모달"을 추가했습니다. 모달은 성공적으로 닫히지 만 POST 메서드는 "실행되지 않는 것"이며 페이지는 동일하게 유지됩니다. 다른 사람이 모달 안에 양식을 넣으려고했는데 제대로 작동합니까?

 <div class="modal hide fade" id="signin-register" tabindex="-1" role="dialog" aria-labelledby="image-modal-label" aria-hidden="true"> 


    <div class="modal-body"> 
     <div class="row-fluid"> 
      <div class="span12"> 

      <div class="span6"> 
       <div class="row-fluid"> 
        <div class="span12"> 

         <legend>Sign in</legend> 

         <form class="navbar-form pull-right" method="POST" action="login/"> 
          <input type="hidden" name="a" value="validate" /> 
          <input class="input-small" type="text" placeholder="Username" name="username"> 
          <input class="input-small" type="password" placeholder="Password" name="password"> 
          <button class="btn btn-small btn-info" type="submit" class="btn2" data-dismiss="modal"><strong>sign in</strong></button> 
         </form> 

         <legend>Register</legend> 


         <form action="" method="POST" id="register_form"> 

          <label>Username:*</label><input class="input-small" type="text" name="username" placeholder="Username" /> 

          <label>Password:*</label><input class="input-small" type="password" name="password" placeholder="Password" /> 

          <label>Email:*</label><input type="text" name="email" placeholder="E-mail" /><br> 
          <input type="submit" name="a" value="Register" data-dismiss="modal"/> 

         </form> 

        </div> 
       </div> 
      </div> 

      <div class="span6"> 
       <div class="row-fluid"> 
        <div class="span12"> 


        </div> 
       </div> 
      </div> 



      </div> 
     </div> 
    </div> 

    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

그리고 로그인 양식이 모달 외부에서 작동 함을 확인했습니다.

Answer 1

. 양식 제출 버튼에 data-dismiss을 입력하면 실제 "제출"작업이 실행되지 않으며 양식이 제출되지 않습니다.

양식을 AJAX를 통해 제출하려는 경우 성공 이벤트가 양식 해지를 유발하게하십시오. 기존 양식 게시를 수행하는 경우 페이지가 새로 고침되거나 리디렉션 될 것이므로 모달 해제에 대해 걱정할 필요가 없습니다.

Answer 2

data-dismiss="modal"의 요소는 모달을 해제하기위한 것으로 기본 동작 (예 : 양식 제출과 같은)은 무시됩니다.

양식을 제출해야하는 경우 제출 단추에서이 속성을 사용하지 마십시오. 그처럼 간단합니다.

Answer 3

매우 쉽습니다. 제출시 data-dismiss 속성은 필요하지 않습니다. MVC4를 사용하고 있는데 일상적으로 수행합니다.

<div id="mdlProceed" class="modal hide fade" data-backdrop="static" data-keyboard="false"> 
     <div class="modal-header"> 
      <h3>Header</h3> 
     </div> 
     <div class="modal-body"> 
     Body 
     </div> 
     @using (Html.BeginForm(null, null, 
           new { area = "MyArea", controller = "MyController", action = "MyAction" }, FormMethod.Post)) 
     { 
      @Html.AntiForgeryToken() 

      <div class="modal-footer"> 
       <input type="button" name="cancel" id="cancel" accesskey="c" class="btn btn-warning" data-dismiss="modal" value="Cancel" alt="Return" /> 
       <input type="submit" name="start" id="start" accesskey="n" class="btn btn-primary" data-loading-text="Please Wait..." value="Continue" /> 
      </div> 
     } 
    </div> 

Answer 4

시도해 보았습니다. 그 버튼의 클릭 이벤트를 차단하고 품어 방지하는 링크 나 버튼 data-dismiss 할당

<div style="width:800px" class="modal hide fade"> 
    <div class="modal-header">Some header 
    </div> 
    <div class="modal-body">Some body 
    <input...... fields..... > 
    </div> 
    <div class="modal-footer"> 
     <input class="btn btn-primary" value="Submit" onclick="SubmitData();"> 
     <a href="#" class="btn" data-dismiss="modal" >Close</a> 
    </div> 
</div>