은 외부 모달 HTML 문서를 포함합니다.

나는 부트 스트랩 모달과 함께 만들어야 할 그림이 상당히 많습니다. JS와 함께 작동하는 함수는 현재 잘 작동하지만 코드를 최적화하고 싶습니다. 이것은 HTML 코드입니다.은 외부 모달 HTML 문서를 포함합니다.

HTML은

<img id="courseImage" src="/images/thumbs/image1.jpg" alt="Trolltunga, Norway" width="300" height="200"> 
<!-- The Modal --> 
    <div id="courseModal" class="modal"> 

     <!-- The Close Button --> 
      <span class="close" onclick="document.getElementById('courseModal').style.display='none'">&times;</span> 

      <!-- Modal Content (The Image) --> 
      <img class="modal-content" id="img01"> 

      <!-- Modal Caption (Image Text) --> 
      <div id="caption"></div> 
    </div>

나는 HTML의 일부를 포함 할 수있는 방법이 없습니다. 이런 식으로하려고했지만 그게 효과가 없습니다.

<img id="courseImage" src="/images/thumbs/image1.jpg" alt="Trolltunga, Norway" width="300" height="200"> 

<?php include $_SERVER['DOCUMENT_ROOT'] . '/resources/includes/courseModal.html' ?>

것은 난 그냥 약 100 사진에 대한 HTML을 설정해야하는 경우, 거 하나 개의 문서에 HTML 코드를 많이 많이 할 수 있다는 것을 생각하고있다. 각 그림은 6 줄의 코드를 사용합니다.

출처

2016-10-25 Ne Kr

모달의 경우 emodal.js 또는 bootbox.js로 이동할 수 있습니다. http://saribe.github.io/eModal/#demo http://bootboxjs.com/examples.html –

ModaliseJS을 사용할 수 있습니다. 머리에서

: 모달 더 수정이 필요하지

<script src="js/modalise.js" type="text/javascript">

가 (단지 인라인 JS 제거)하여 app.js 파일에서

<!-- The Modal --> 
<div id="courseModal" class="modal"> 

    <!-- The Close Button --> 
     <span class="close"></span> 

     <!-- Modal Content (The Image) --> 
     <img class="modal-content" id="img01"> 

     <!-- Modal Caption (Image Text) --> 
     <div id="caption"></div> 
</div>

, 단순히 추가

var myModal = new Modalise('courseModal', { 
     btnsOpen : [document.getElementById('courseImage')] 
    }).attach();

처리가 자동으로 이루어지면 #courseImage 이미지를 클릭하면 전자 모달. 모달에 .close 요소를 클릭하면 모달이 닫힙니다.

출처

2016-10-28 07:24:26

은 외부 모달 HTML 문서를 포함합니다.

답변

관련 문제