자바스크립트 문의드립니다.
본문
버튼 한개를 사용하고 있는데요. 버튼을 3개를 사용하고 싶은데..
아래 소스를 어떻게 추가햐야지 충돌안나고 쓸 수 있을까요? ㅜㅜ
계속 삽질 중이네요ㅜㅜ
<img src="/버튼.jpg" aria-label="open-modal" data-modal="open-modal">
<div class="modal" id="modal-1" role="dialog" aria-hidden="true" data-modal>
내용
</div>
<script>
$('#modal-1').modelo();
</script>
2.
그리고 팝업을 사용하는데요 아래 같이 버튼을 클릭하면 경고창이 뜨는데
이거를 <div>내용</div> 창을 불러 올라면 어떻게 수정해야 될까요? ㅜㅜ
알려주시면 정말 감사하겠습니다.
<button class="btn btn-danger demo-1">Alert example</button>
<script>
var message = "here";
var title = "Hello!";
$(".demo-1").click(function(){
eModal.alert(message, title);
});
</script>
답변 2
1. 일반 bootstrap를 사용하시는게 다중은 좋습니다
위의 모델은 싱글로 작동하느것이라서 안에 내용을 변경하시는 방법이 있습니다
<img src="/버튼.jpg" aria-label="open-modal" data-modal="open-modal" class="modal_btn" data-val='1'>
<img src="/버튼.jpg" aria-label="open-modal" data-modal="open-modal" class="modal_btn" data-val='2'>
<img src="/버튼.jpg" aria-label="open-modal" data-modal="open-modal" class="modal_btn" data-val='3'>
<div class="modal" id="modal-1" role="dialog" aria-hidden="true" data-modal>
<div class="modal-content" id="content1">
<div class="content" id="content1">
내용1
</div>
<div class="content" id="content2">
내용2
</div>
<div class="content" id="content3">
내용3
</div>
</div>
</div>
<style>
#modal-1 .content{display:none;}
</style>
<script>
$('#modal-1').modelo();
jQuery(document).ready(function(){
jQuery("img.modal_btn").on("click", function(){
var val=jQuery(this).data("val");
jQuery("#modal-1 .content").css("display","none");
jQuery("#modal-1 #content"+val).css("display","block");
});
});
</script>
2.
<div id="testcopy">내용</div>
<script>
$(".demo-1").click(function(){
eModal.alert(jQuery("#testcopy").html());
});
</script>
1번.. 전체 소스가 없어서 답변드리기가 어렵네요
2번..
<div id='test' style="display:none">내용</div>
$(".demo-1").click(function(){
$("#test").show();
});
