JS, Jquery, Bootstrap 작업 3. 개별적으로 트리거되는 다중 모달을 작성하는 대신 임베드 된 컨텐츠를 기반으로 모달을 채우고 임베드 된 컨텐츠로 모달을 채우는 스크립트를 작성했습니다.내 JS if 문에 문제가 있습니까?
모달 마크 업 :
<div class="modal fade" id="ideasmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
<span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body" id="library-content"></div>
</div>
</div>
</div>
트리거 :
<a data-frame="http://path.to.url" data-content="embed" class="btn btn-primary modaltrigger" role="button">Learn More</a>
<a data-frame="http://path/to/image.png" data-content="image" class="btn btn-primary modaltrigger" role="button">Learn More</a>
JS
$(document).ready(function(){
$(".modaltrigger").click(function(){
var dataContent = this.getAttribute("data-content");
if (dataContent = "embed") {
var modalClass = 'embed-responsive embed-responsive-16by9';
var modalContent = this.getAttribute("data-frame");
var modalBody = document.createElement("IFRAME");
var embedContainer = document.createElement("DIV");
embedContainer.setAttribute("class", modalClass);
modalBody.setAttribute("src", modalContent)
modalBody.setAttribute("class", "embed-responsive-item");
modalBody.setAttribute("frameborder", "0");
document.getElementById("library-content").appendChild(embedContainer);
embedContainer.appendChild(modalBody);
$('#ideasmodal').modal('show');
}
else if (dataContent = "image") {
var modalContent = this.getAttribute("data-frame");
var modalBody = document.createElement("IMG");
modalBody.setAttribute("src", modalContent);
modalBody.setAttribute("class", "img-responsive");
document.getElementById("library-content").appendChild(modalBody);
$('#ideasmodal').modal('show');
}
});
$(".close").click(function(){
document.getElementById("library-content").innerHTML= "";
});
});
그래서 라이브 사이트에 나는 데이터 내용이 링크를 클릭하면됩니다 무슨 일이 일어나고 있는지 = "image", 사이트는 여전히 iframe을 생성하는 대신 내 if 문의 이미지 (ELSE)를 직접 포함합니다. 부트 스트랩의 반응 형 임베드 클래스에 정의 된 비율에 국한되지 않고 싶다는 것만 제외하면 큰 문제는 아닙니다. 내 이미지가 항상 4 : 3 또는 16 : 9 비율에 맞춰지는 것은 아닙니다.
나는 JS에 매우 익숙하다. 그래서 매우 분명한 것을 놓친다면 사과한다. 나는 콘솔/디버거로 이걸 실행했고, toString이 허용되지 않는다는 것 외에는 내게 던져지는 에러를 얻지 못한다. (검색에서이 사이트를 볼 때 플래시 문제 일 때 무시할 수있다.)
'='비교를 할 때 ==='이어야합니다.'='변수를 설정할 것입니다. – smerny
http://jshint.com과 같은 도구를 사용하여 일반적인 오류를 찾는 것을 고려하십시오. –
이전에 해당 사이트를 본 적이 없습니다. 고맙습니다! 그것은 북마크되고있다. – user3366357