Twitter 부트 스트랩 모달을 닫는 방법 (초기 시작 후)

91

나는 매우 멍청한 사람이기 때문에 트위터 부트 스트랩 모달로 무언가를 (아마도 분명한) 감독하고 있다고 생각합니다. 내가하려는 것은 모달을 모바일에서만 실행하는 것입니다. 이것은 모달 div에 .visible-phone 클래스를 추가하면 잘 작동합니다. 여태까지는 그런대로 잘됐다. 하지만 작동하기를 원합니다. 즉, X 버튼으로 닫을 수 있습니다. 그리고 버튼이 작동하지 않습니다.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

html 하단에 jquery.js (첫 번째)와 bootstrap.modal.js 및 bootstrap.transition.js를 넣었습니다. 실제로 모든 부트 스트랩 js 모듈 (포함을 놓치지 마세요). 나는 js ..

정말 멍청한 질문을했다면 용서 해주세요.이 상황에 대한 답을 로그에서 찾을 수 없었습니다.

twitter-bootstrap  modal-dialog 
— 모니크 드 하스
소스

답변:

219

$('#myModal').modal('hide') 그것을해야한다

— 아얄 겔 레스
소스
예, 작동합니다. 하지만 'data-dismiss = "modal"'을 사용하는 것과 동일한 애니메이션이 없습니까?
— Chris
그래 내 실수. 사실 그 당시에 있었던 문제를 기억하지 못합니다. 이제 이것을 사용하고 완벽하게 작동합니다. 타이!
— Chris
자세한 내용은 여기를 .. 알아 stackoverflow.com/questions/10944302/...을
— 산 제이 쿠마
6
이것은 이상 $('#myModal').modal('show')하고 나를 위해 일하지만 Hide는 그렇지 않습니다.
— Charlotte
3
사용하려고 @LittleBigBot $('#myModal').modal('toggle');대신
— 에드 슨 오라 주니어에게
27

다음으로 열린 경우 부트 스트랩 모달 대화 상자를 닫는 데 문제가 있습니다.

$('#myModal').modal('show');

다음 링크로 대화 상자를 여는이 문제를 해결했습니다. 

<a href="#myModal" data-toggle="modal">Open my dialog</a>

초기화를 잊지 마세요 :

$('#myModal').modal({show: false});

또한 닫기 버튼에 다음 속성을 사용했습니다.

data-dismiss="modal" data-target="#myModal"
— Artkoenig
소스
안녕하세요 artjom. Thnx! 그것을 실행하고 피드백을 줄 것입니다. 모달을 열기 위해 à 버튼을 사용하고 있지 않습니까? 그것이 내가 달성하려는 것이므로. à 모달을 처음에는 모바일에서만 실행하여 위치에 대한 빠른 탐색 메뉴를 제공합니다 (데스크톱에서는 직접 관련이 없음).
— Monique De Haas
예 data-dismiss = "modal"data-target = "# myModal"이 내 문제를 해결했습니다! 감사합니다!
— Dheeraj Thedijje
13

모달에 클래스 숨기기 추가

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

자바 스크립트 코드

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>
— 샤 우낙 1111
소스
13

.modal ( 'hide') 는 모달을 수동으로 숨 깁니다. 다음 코드를 사용하여 부트 스트랩 모델을 닫습니다.

$('#myModal').modal('hide');

여기 에서 작동하는 코드 펜을 살펴보십시오.

또는

여기에서 시도

코드 스 니펫 표시

— 수 보드 굴 락스
소스
6

버튼이 데이터 대상과 함께 닫아야하는 모달을 정확히 지정해보십시오. 따라서 버튼은 다음과 같아야합니다.

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

또한 bootstrap.modal.js 만 필요하므로 나머지는 안전하게 제거 할 수 있습니다.

편집 : 이것이 작동하지 않으면 보이는 전화 클래스를 제거하고 전화 대신 PC 브라우저에서 테스트하십시오. 이것은 자바 스크립트 오류가 발생하는지 또는 호환성 문제인지 여부를 보여줍니다.

편집 : 데모 코드

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>
— 사이먼 커닝햄
소스
안녕하세요 @Simon Cunningham Tnx가 답변 해 주신 백만입니다! 데이터 타겟을 입력했습니다. 작동하지 않음 (불행히도) 그런 다음 눈에 보이는 전화 수업을 제거했습니다. 차이를 만들지 않았습니다. code <div class = "modal visible-phone"id = "myModal"> <div class = "modal-header"> <button class = "close"data-dismiss = "modal"data-target = "# myModal"> × </ button> <h3> 텍스트 소개 <br> 탐색 대상 ... </ h3> </ div> <div class = "modal-body"> <ul class = "nav"> <li> .. . 링크 목록은 여기 </ li> <li> link2 </ li> <li> link3 </ li> </ ul> </ div> </ div>code
<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>
— Monique De Haas
텍스트가 엉망이어서 죄송합니다.) 나는 당신의 조언을 따랐습니다. 닫기 버튼에 정확한 데이터 타겟을 제공하는 것이 논리적으로 보입니다. 그러나 어떻게 든 여전히 작동하지 않습니다. 보이는 전화를 비활성화하더라도. 닫기 버튼에 영향을주지 않는 것 같습니다. (좋은 물건의 종류입니다)
— 모니크 드 하스
처음에 모달을 어떻게 열었습니까? 아래와 같이 열어보십시오.-<a data-toggle="modal" href="#myModal" class="btn"> 모달 열기 </a>
— Simon Cunningham
원래 답변에 잘라낸 데모 코드를 추가했습니다. javascript 및 css 파일은 내 테스트 프로젝트에 로컬이므로 자신의 링크로 바꾸면됩니다.
— Simon Cunningham
6

문서에 따라 숨기기 / 토글이 작동합니다. 하지만 그렇지 않습니다.

내가 한 방법은 다음과 같습니다.

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body
— user706001
소스
1
이것은 실제로 올바른 "무력한 힘"대답입니다 ..하지만 애니메이션을 올바르게 만들기 위해 다시 작성하는 것이 좋습니다.$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });
— DerDu
3

이거 한번 해봐 ..

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();
— 테크
소스
1

나는 아이폰이나 데스크탑에서 같은 문제가 있었고 닫기 버튼을 눌렀을 때 대화 상자를 닫지 못했습니다.

<button>태그가 클릭 가능한 버튼을 정의하고 다음과 같이 요소의 유형 속성을 지정하는 데 필요하다는 것을 알았습니다 .

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

부트 스트랩 모달에 대한 예제 코드를 확인하십시오. BootStrap javascript Page

— Isma
소스
0

동시에 표시되는 모달이 거의없는 경우 속성 data-toggle및 data-target다음 과 같은 인모 달 버튼에 대한 대상 모달을 지정할 수 있습니다 .

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

모달 코드 외부에 다른 토글 버튼이있을 수 있습니다.

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

이 버튼이 숨겨져있는 동안 사용자는 인모 달 토글 버튼을 클릭 할 수 없으며 "modal"속성 옵션으로 올바르게 작동 합니다 data-toggle. 이 계획은 자동으로 작동합니다!

— 사운드 블래스터
소스
0

다음은 페이지 새로 고침없이 모달을 닫을뿐만 아니라 Enter 키를 누르면 모달을 제출하고 새로 고침없이 닫는 스 니펫입니다.

여러 모달을 가질 수 있고 일부 모달은 제출시 데이터를 처리하고 일부는 그렇지 않은 내 사이트에 설정했습니다. 내가하는 일은 처리를하는 각 모달에 대해 고유 한 ID를 만드는 것입니다. 예를 들어 내 웹 페이지에서 :

HTML (모달 바닥 글) :

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY :

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

보시다시피이 제출은 처리를 수행하므로이 모달에 대해이 jQuery가 있습니다. 이제이 웹 페이지 내에 다른 모달이 있지만 처리가 수행되지 않고 한 번에 하나의 모달이 열려 있기 때문에 $(document).ready()모든 페이지가 가져 오는 전역 php / js 스크립트 에 다른 모달을 넣고 모달의 닫기 버튼에 다음과 같은 클래스를 제공 한다고 가정 해 보겠습니다 ".modal-close".

HTML :

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (global.inc 포함) :

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });
— yardpenalty.com
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.