JQuery SimpleModal - 내부 링크?

simplemodal 플러그인을 사용하여 여러 개의 모달 창을 사용할 수있게되었지만 사용자가 직접 수동으로 닫지 않고 전환 할 수 있어야합니다.JQuery SimpleModal - 내부 링크?

이 시점에서 저는 아직 예제를 통해 이것을 배우고 있습니다. 이 문제에 대한 몇 가지 다른 언급을 보았지만 제안 된 솔루션은 작동하지 않거나 동일한 빌딩 블록으로 시작하지 않습니다.

모든 도움말이나 조언을 크게 듣습니다. 하나의 모달 어떤 시점에서 개방하는

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>SimpleModal</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type='text/javascript' src='js/jquery.simplemodal.js'></script> 
<script> 
jQuery(function ($) { 
    $('#basic-modal .link1').click(function (e) { 
     $('#link1-modal-content').modal(); 
     return false; 
    }); 

    $('#basic-modal .link2').click(function (e) { 
     $('#link2-modal-content').modal(); 
     return false; 
    }); 

    $('#basic-modal .link3').click(function (e) { 
     $('#link3-modal-content').modal(); 
     return false; 
    }); 
}); 
</script> 
<style> 
#simplemodal-overlay {background-color:#000; cursor:wait;} 
</style> 
</head> 

<body> 

<!-- MAIN PAGE/LINKS TO MODAL WINDOWS--> 
<div id='basic-modal'> 
    <a href="#" class="link1" id="pop1">Link to Content 1</a><br /> 
    <a href="#" class="link2" id="pop2">Link to Content 2</a><br /> 
    <a href="#" class="link3" id="pop3">Link to Content 3</a><br /> 
</div> 



<!-- INDIVIDUAL MODAL WINDOWS CONTENT --> 
<div id="link1-modal-content" style="display:none; width:200px; height:200px; background-color:#FFFFFF;"> 
    <p>Content 1</p> 
    Content 1<br /> 
    <a href="#" class="link2" id="pop2">Link to Content 2</a><br /> 
    <a href="#" class="link3" id="pop3">Link to Content 3</a><br /> 
</div> 

<div id="link2-modal-content" style="display:none; width:200px; height:200px; background-color:#FFFFFF;"> 
    <p>Content 2</p> 
    <a href="#" class="link1" id="pop1">Link to Content 1</a><br /> 
    Content 2<br /> 
    <a href="#" class="link3" id="pop3">Link to Content 3</a><br /> 
</div> 

<div id="link3-modal-content" style="display:none; width:200px; height:200px; background-color:#FFFFFF;"> 
    <p>Content 3</p> 
    <a href="#" class="link1" id="pop1">Link to Content 1</a><br /> 
    <a href="#" class="link2" id="pop2">Link to Content 2</a><br /> 
    Content 3<br /> 
</div> 


</body> 
</html>

출처

2012-11-05 Atomische

열린 모델을 열기 전에 다른 모델을 열어야 할 수도 있습니다. 'CLOSE' 동작이있는 경우 플러그인 문서를 확인하십시오 –

SimpleModal는 같은 당신이 기존의 모달을 닫고 새로 열거 나 콘텐츠를 교환 할 필요가 있습니다. 나는 그것이 모든 링크에 결합하므로 일반적으로 클릭 선택을 변경하고 열기 전에 조동사를 닫 전화를 추가 한

function closeAllModal() { 
    $.modal.close(); 
} 

jQuery(function ($) { 


    $('.link1').click(function (e) { 
     closeAllModal(); 

     $('#link1-modal-content').modal(); 
     return false; 
    }); 


    $('.link2').click(function (e) { 
     closeAllModal(); 

     $('#link2-modal-content').modal(); 
     return false; 
    }); 

    $('.link3').click(function (e) { 
     closeAllModal(); 
     $('#link3-modal-content').modal(); 

     return false; 
    }); 
});

은 /는 가까운 자바 스크립트 대신 다음 사용 열려면 각. 이렇게하면 원하는 효과를 얻을 수 있습니다.

출처

2012-11-05 16:38:03 Kami

고맙습니다 ... 답변은 완벽하게 작동하고 배울 수있는 방법으로 설명했습니다. – Atomische

JQuery SimpleModal - 내부 링크?

답변

관련 문제