bootstrap에서 모달 팝업, 모달 팝업의 속성 예제 자세히 설명

工作中에 필요한 모달 팝업이 있는 경우 확인해 보세요

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel">
            ×
          </button>
          <h4 class="modal"-title" id="myModalLabel">
            프론트엔드 메뉴 관리
          </h4>
        </div>
          <div class="modal-body">
            <div>
              <table width="100%" border="0" class="userCon_"2">
                <tr>
                  <th width="30%">이름：</th>
                  <td width="70%">
                    <input type="text" name="Name" class="form-control" style="border-radius:3px; width:220px;" id="txtName" required="" aria-required="true">
                  </td>
                </tr>
                <tr>
                  <th>동작유형：</th>
                  <td>
                    <select class="selectpicker show-tick" id="txtType" style="height: 30px; width: 220px;" name="Type">
                      <option value="view">view</option>
                      <option value="click">click</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th>경로：</th>
                  <td>
                    <input type="text" name="Url" class="form-control" style="border-radius:3px; width:220px;" id="txtUrl" required="" aria-required="true" />
                  </td>
                </tr>
                <tr>
                  <th>정렬：</th>
                  <td>
                    <input type="text" name="Rank" class="form-control" style="border-radius:3px; width:220px;" id="txtRank" />
                    <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="modal-footer" style="border-top:none;">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">닫기</button>
            <button type="submit" class="btn btn-primary" id="btnSave">저장</button>
          </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

모달 창에는 클릭한 스크린을 통해 모달 창이 닫히는 것을 방지할 수 있는 속성이 있습니다. 이는 div에서 설정된 data-backdrop="static". 이는 모달 창에서 내용을 입력하는 동안 갑자기 오류가 발생하여 모달 창이 닫히는 것을 방지합니다.

또한 다른 속성이 있습니다: data-keyboard="false". 이는 ESC 키를 누를 때 효과가 없도록 설정하는 것입니다. 또한 모달 창이 갑자기 닫히는 오류를 방지하기 위해 설정됩니다.

<div id="toolbar" class="btn-group">
      <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>추가
      </button>
      <button id="btn_edit" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>수정
      </button>
      <button id="btn_delete" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>삭제
      </button>
</div>

중에서 버튼 속성 data-toggle="modal" data-target="#userModal"은 모달 창을 엽니다.

선언: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원 저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으시면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보내는 이메일에서 #을 @으로 변경하시오）를 통해 신고하시고 관련 증거를 제공하시면, 사실이 확인되면 해당 사이트는 즉시 저작권 침해 내용을 삭제합니다。