외부 URL 본문 및 데이터 속성의 동적 링크가있는 모달 사용

외부 링크를 사용하여 부트 스트랩 모달 작업을하려고합니다. 외부 URL 본문 및 데이터 속성의 동적 링크가있는 모달 사용

이

내가 지금까지 한 일이지만, 내가 생각하는 몇 가지 구문 오류가있다 :

<html> 
    <head> 
     <link type="text/css "rel="stylesheet" href="/assets/css/bootstrap.min.css" /> 
    </head> 
    <body> 
     <a href="#popUp" id="popUp" data-href="/test1.php">1</a> 
     <a href="#popUp" id="popUp" data-href="/test2.php">2</a> 
     <div class="modal fade" id="popUpModal" tabindex="-1" role="dialog" aria-labelledby="popUpModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="popUpModalLabel">PopUp</h4> 
        </div> 
        <div class="modal-body"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript" src="/assets/js/jquery.1.10.2.min.js"></script> 
     <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#popUp').click(function() { 
        $('#popUpModal .modal-body').load(('#popUp').data('href'), function(e) { 
         $('#popUpModal').modal('show') 
        }) 
       }) 
      } 
     </script> 
    </body> 
</html>

기본적으로, 생각 나는 1 및 /test2.php를 클릭하면 모달 (popUpModal)로 /test1.php을 열 수는 2을 클릭하면

출처

2014-12-30 Kupigon

(' ID는 HTML에서 고유해야하며 같은 ID를 가진 두 개의 div가 있어야합니다. 'popUp' – vaso123

누락 된 부분을 추가했습니다. 그러나 다른 ID를 사용하면 각자 다른 JS를 수행해야합니다 ... Isn 다른 방법 없어? – Kupigon

내 대답을 참조하십시오. – vaso123

귀하의 스크립트, 무엇을 닫아야하는지 .IDD (ID는 HTML에서 고유해야하며 팝업 ID가 동일한 두 div가 있습니다.)

팝업 링크 변경 -및 $(this).data('href')를 사용은 어디로드 :

<a href="#popUp" class="popUp" data-href="/test1.php">1</a> 
<a href="#popUp" class="popUp" data-href="/test2.php">2</a>

그리고 스크립트 : 당신은 실종`)`스크립트의 끝에서, 무엇은`.ready을 닫아야이

$(document).ready(function() { 
    $('.popUp').click(function() { 
     $('#popUpModal .modal-body').load($(this).data('href'), function(e) { 
      $('#popUpModal').modal('show') 
     }); 
    }); 
});

출처

2014-12-30 14:46:39 vaso123

감사합니다 !!! 제대로 작업 :-) 내 페이지에 100 개 이상의 팝업 창이 있기 때문에이 작업을하려고했습니다. – Kupigon

당신은 오신 것을 환영합니다! – vaso123

는 버전 3.1에서 위의 동작이 변경되었습니다 지금은 원격 콘텐츠는 .modal 컨텐츠에로드

<a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Click me !</a> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <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"><div class="te"></div></div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
      <!-- /.modal-content --> 
     </div> 
     <!-- /.modal-dialog --> 
    </div> 
    <!-- /.modal -->

바이올린 당신은 끝에 ) 누락 한 http://jsfiddle.net/koala_dev/NUCgp/918/

출처

2014-12-30 14:43:10

알아요,하지만 내 페이지에 여러 모달을 만들고 싶지 않기 때문에 data-href 속성에서 동적 연결을 원합니다. – Kupigon

외부 URL 본문 및 데이터 속성의 동적 링크가있는 모달 사용

답변

관련 문제