페이지의 다중 부트 스트랩 모달 창

한 페이지에 여러 개의 부트 스트랩 모달이 필요합니다. 각 모달 상자의 ID를 변경하면이 기능이 작동하지만 IDs must be unique입니다.페이지의 다중 부트 스트랩 모달 창

HTML :

<span class="filesicon"><a data-target="#myModal-1" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span> 
<span class="filesicon"><a data-target="#myModal-2" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span> 

<div class="modal fade" id="myModal-1"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 

      </div> 
      <div class="modal-body" style="padding:0px; margin:0px width: 560px;"> 
       <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="modal fade" id="myModal-2"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 

      </div> 
      <div class="modal-body" style="padding:0px; margin:0px width: 560px;"> 
       <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe> 
      </div> 
     </div> 
    </div> 
</div>

내 방법은 사실인가요? 아니, 더 나은 방법을 말해주십시오.

출처

2014-09-12 Pink Code

여러 페이지를 단일 페이지에 배치하는 올바른 방법입니다. 단순히 피할 수는 없습니다.

각 모달을 같은 방식으로 호출합니다. 표시된 모달을 반영하도록 data-target을 변경하면됩니다.

<a href="#" class="list-group-item" id="myModal-1-link" data-toggle="modal" data-target="#myModal-1">Modal 1</a> 
<a href="#" class="list-group-item" id="myModal-2-link" data-toggle="modal" data-target="#myModal-2">Modal 2</a>

없습니다 부트 스트랩과 함께, 그것을 할 다른 방법이 아니지만, 나는 그들이 부트 스트랩으로 매우 유창하게 작업 할 것입니다 의심하지만, 더 간단하다 조동사 다른 옵션이 있습니다 확신 해요.

출처

2014-09-12 12:31:47

추가 플러그인을 사용하는 것이 옵션이라면 bootbox.js를 고려해 보셨습니까?

부피가 큰 HTML이 아닌 몇 줄의 자바 스크립트를 사용하여 부트 스트랩 모달을 표시 할 수 있습니다.

예를 몇 가지 조치를 확인하도록 요청하는 부트 스트랩 모달를 표시합니다 :

bootbox.confirm("Are you sure?", function(result) { 
    Example.show("Confirm result: "+result); 
});

http://bootboxjs.com/

출처

2014-09-12 13:22:17 ChaoticNadirs

나는 bootply에 코드를 사용하고 잘 작동하는 것 같다. 어쩌면 당신의 조동사

또는 함께 엉망으로 코드에서 뭔가 다른

<script> $('#myModal-1').modal(options) $('#myModal-2').modal(options) </script>

이 initate 시도가있다. 비슷한 상황에서 나에게 트릭을 마쳤다.

출처

2014-09-12 14:54:27 Turqueso

페이지의 다중 부트 스트랩 모달 창

답변

관련 문제