부트 스트랩 모달이 즉시 사라짐

부트 스트랩을 사용하여 웹 사이트에서 작업하고 있습니다.

기본적으로, 나는 영웅 유닛의 버튼으로 소환 된 홈페이지에서 모달을 사용하고 싶었습니다.

버튼 코드 :

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

모달 코드 :

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

문제는 버튼을 클릭하자마자 모달이 사라지고 즉시 사라진다는 것입니다.

도움을 주셔서 감사합니다.

또한 드롭 다운 삼각형의 색상을 변경하는 방법 (위를 가리키고 가리 키지 않음)? 오렌지와 브라운을 기반으로 한 웹 사이트에서 작업 중이며 파란색은 정말 성가신 일입니다.

가능한 원인

이것은 모달 플러그인 용 JavaScript가 두 번로드 될 때의 일반적인 동작입니다. 플러그인이 이중로드되지 않는지 확인하십시오. 사용하는 플랫폼에 따라 여러 소스에서 모달 코드를로드 할 수 있습니다. 일반적인 것들 중 일부는 다음과 같습니다.

• bootstrap.js (전체 BootStrap JS 제품군)
• bootstrap.min.js (위와 동일, 축소됨)
• bootstrap-modal.js (독립형 플러그인)
• 의존성 로더, 예를 들어 require('bootstrap')

디버깅 팁

시작하기에 좋은 곳은 click브라우저의 개발자 도구를 사용하여 등록 된 이벤트 리스너 를 검사하는 것 입니다. 예를 들어 Chrome은 리스너를 등록 할 코드를 찾을 수있는 JS 소스 파일을 나열합니다. 또 다른 옵션은 페이지에서 소스를 검색하여 모달 코드에서 찾은 문구를 검색하는 것입니다 (예 :) var Modal.

불행히도, 모든 경우에 항상 물건을 찾을 수는 없습니다. 네트워크 요청을 검사하면 페이지에로드 된 모든 것을 그림으로 볼 수 있습니다.

(깨진) 데모

bootstrap.js 와 bootstrap-modal.js를 모두로드 할 때 (경험을 확인하기 위해) 데모는 다음과 같습니다 .

플 런커

해당 페이지에서 소스의 맨 아래로 스크롤 <script>하면 bootstrap-modal.js 의 행을 제거하거나 주석 처리 한 다음 모달이 예상대로 작동하는지 확인할 수 있습니다.

나는 같은 문제가 있었지만 다른 원인이있었습니다. 나는 설명서를 따르고 다음과 같은 버튼을 만들었습니다.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

클릭하면 아무 일도 일어나지 않는 것 같습니다. 그러나 버튼이 <form>일시적으로 동일한 페이지를 가져 왔습니다.

type="button"버튼 요소 를 추가 하여 클릭하면 양식이 제출되지 않도록 수정했습니다.

나를 위해 일한 것은 제거하는 것이 었습니다.

data-toggle="modal"

버튼에서. 버튼 자체는 링크, div, 버튼 등 모든 요소가 될 수 있습니다.

이 질문에 대한 다른 유용한 답변 후에 내 mvc 앱에서 중복 부트 스트랩 참조를 잠시 찾았습니다.

마침내 그것을 찾았습니다-그것은 내가 사용하고있는 다른 라이브러리에 포함되어 있었으므로 전혀 분명하지 않았습니다! ( datatables.net).

여전히이 문제가 발생하면 부트 스트랩을 포함 할 수있는 다른 라이브러리를 찾으십시오. ( datatables.net부트 스트랩 유무에 관계없이 다운로드를 지정할 수 있습니다-다른 사람들도 동일하게 수행합니다).

그래서 나는 bootstrap.min.js내를 제거 bundle.config하고 모두 잘 작동했습니다.

bootstrap-sassgem이 제공하는 Bootstrap을 사용하는 Rails 응용 프로그램과 관련하여 동일한 증상이 있으며 @merv의 대답으로 올바른 경로를 찾을 수 있습니다.

내 application.js파일은 다음과 같습니다.

//= require bootstrap
//= require bootstrap-sprockets

수정은 두 줄 중 하나를 제거하는 것이 었습니다. 실제로 gem의 readme는이 오류에 대해 경고합니다. 내 잘못이야.

내 코드에는 어떻게 든 bootstrap.min.js가 두 번 포함되었습니다. 나는 그들 중 하나를 제거하고 모든 것이 잘 작동합니다.

e.preventDefault(); jquery ui로

나 에게이 문제는 jquery ui 버튼의 click 메소드 재정의로 발생하여 기본적으로 클릭시 페이지가 다시로드됩니다.

jquery를 사용하여 이벤트 리스너를 두 번 연결하면 문제가 발생할 수도 있습니다. 예를 들어 바인딩 해제하지 않고 설정할 수 있습니다.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

이 경우 이벤트가 연속으로 두 번 발생하고 모달이 사라집니다.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

예를 참조하십시오 : http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

나는 @gpasse가 그의 예에서 보여준 것과 동일한 증상에 부딪쳤다. 여기 내 코드가 있습니다 ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

@Bhargav가 제안한 것처럼 내 문제는 버튼을 제출하여 양식을 제출하고 페이지를 다시로드했기 때문입니다. <a>다음과 같이 버튼을 링크로 변경했습니다 .

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... 문제가 해결되었습니다.

참고 : 나는 단순히 의견을 추가하거나 투표할만한 평판이 충분하지 않으며 약간의 설명을 추가 할 수 있다고 생각했습니다.

나도 같은 문제가 있었지만 모달 양식 내에 "submit"유형의 버튼이 있었기 때문에 문제가 발생했습니다. 나는 바꿨다

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

에

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

그리고 그것은 실종 문제를 해결했습니다.

제 경우에는 하나의 bootstrap.js, jquery.js 파일 만 포함되었지만 여전히 이러한 유형의 오류가 발생하며 버튼 코드는 다음과 같습니다.

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

나는 간단하게 e.preventDefault ()를 추가 했다; 그것에 매력처럼 작동했습니다.

그래서 내 새 코드는 다음과 같습니다.

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

오늘이 문제를 직접 만났으며 Chrome에서만 발생했습니다. 렌더링 문제 일 수 있다는 사실을 깨달았습니다. 특정 모달을 자체 렌더링 레이어로 옮기면 해결됩니다.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

필자의 경우 버튼을 클릭하면 원하지 않는 페이지가 다시로드됩니다.

여기 내 수정이 있습니다.

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

내 경우에는 actionlinkMVC에서 버튼을 사용 하고이 문제에 직면 해 왔으며 위의 문제와 다른 문제를 많이 시도했지만 여전히 그 문제에 직면 한 다음 코드의 오류를 인식합니다.

사용하여 자바 스크립트에서 모달을 호출했습니다.

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

오류 전에이 버튼을 사용합니다

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

이 버튼에는 href 속성 값이 없으므로 문제가 발생합니다.

그런 다음이 버튼 코드를 다음과 같이 편집하십시오.

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

그런 다음 문제는 첫 번째 #이 없기 때문에 오류 만 해결됩니다.

이것이 당신에게 도움이되는지보십시오.

또 다른 원인 / 해결책! 나는 JS 코드에 있었다 :

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

그러나 내 HTML 코드는 이미 다음과 같이 작성되었습니다.

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

따라서 이것은 복제가 코드에 입력되고 모달이 열리고 닫히는 방식에 대한 또 다른 순열입니다. 내 경우 data-target와 data-toggleHTML의 부트 스트랩 문서에 따라 이미 작업에 모달를 트리거합니다. 따라서 JS 코드는 중복되며 제거되면 작동합니다.

asp.NET을 사용하는 프로젝트에서 동일한 문제가 발생했습니다. 부트 스트랩 3.1.0을 사용하여 부트 스트랩 2.3.2로 다운 그레이드했습니다.

버튼이 안에 있으면 문제도 발생했습니다. 태그를 누르면 모달이 한 번 나타나고 곧 사라져서 버튼을 꺼내어 문제를 해결했습니다. 고마워이 스레드에서 끝났습니다! 모두 +1

모바일 장치에서 테스트하는 동안 동일한 문제에 직면 했으며이 트릭은 저에게 효과적이었습니다.

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

버튼을 앵커 태그로 변경하면 작동해야합니다. 제출하려고 할 때 유형 버튼으로 인해 문제가 발생하여 모달이 즉시 사라집니다. 또한 모달에서 페이드 숨기기를 제거하십시오 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .

필자의 경우 CDN을 application.html.erb의 헤드에 포함시키고 위의 설명서와 게시물 덕분에 'jquery-rails'보석을 설치했습니다.

나는 application.html.erb의 헤드에서 CDN (아래)을 주석 처리했으며 모달은 적절하게 열려 있습니다.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

나도 같은 문제가 있었다. 나에게 문제는 링크를 누르고 jquery로 확인하라는 모달을 표시하는 것이 었습니다.

아래 코드는 모달을 표시하고 즉시 사라졌습니다.

<a href="" onclick="do_some_stuff()">Hey</a>

나는 href에 '#'을 추가하여 링크가 아무데도 가지 않아 내 문제를 해결했습니다.

<a href="#" onclick="do_some_stuff()">Hey</a>

당신은 제거를 시도 했습니까

data-dismiss="modal"

나는 이것이 오래되었다는 것을 알고 있지만 여기에 확인해야 할 또 다른 것이 있습니다-data-target = 속성이 하나만 있는지 확인하십시오. 나는 그것을 복제했고 결과는이 스레드에 따른 것입니다.

bootstrap를 통해 프로젝트에 추가 bower한 다음 bootstrap.min.js파일을 가져온 후 파일을 가져 왔습니다 modal.js. (모달을 여는 버튼은 양식 안에 있습니다). 가져 오기를 제거하면 modal.js효과가 있습니다.

datatable과 함께 codeigniter 3 부트 스트랩을 사용하는 사람.

아래는 config / ci_boostrap.php의 수정 사항입니다.

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

같은 문제에 직면했다. 이유는와 같습니다 @merv. 문제는 페이지에 캘린더 구성 요소가 추가 된 것입니다. 컴포넌트 자체가 캘린더 팝업에 사용할 모달 기능을 추가합니다.

따라서 모델 팝업을 중단하는 이유는 다음 중 하나 이상입니다.

• 하나 이상의 부트 스트랩 js 버전 / 파일로드 (최소화 ...)
• 부트 스트랩이 사용되는 페이지에 외부 캘린더 추가
• 페이지에 사용자 정의 경고 또는 팝업 라이브러리 추가
• 팝업 동작을 추가하는 다른 라이브러리

Angular (5)로 작업하는 동안 같은 문제가 발생하지만 내 경우에는 다음과 같이 해결되었습니다.

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

참고 : ts 파일에서 jquery를 "declare var $ : any;"로 가져와야합니다.

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

내가 변경 한 사항 :

• 내 경우에는 버튼 태그에서 "data-toggle ="modal "(@ miCRoSCoPiC_eaRthLinG 덕분에이 답변이 도움이 됨)을 제거하여 모달을 표시하므로 (click) ="showresult () "

• 내부 component.ts는 Jquery ($)를 선언해야하며 내부 버튼 클릭 메소드 showresult ()는 "$ ( '# myModal'). modal ( 'show');"

아래와 같이 모달을 두 번 토글했기 때문에 동일한 문제가 발생했습니다.

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

하나의 발생을 제거했습니다.

$ ( '# myErrorModal'). modal ( '토글')

그리고 마술처럼 작동했습니다!