jquery simpleModal 상자가있는 여러 개의 외부 링크 버튼

간단한 JavaScript 확인 상자를 사용하여 인수를 전달하는 방법을 배웠지 만 지금은이 SimpleModal 스크립트로 작업하고 있습니다.jquery simpleModal 상자가있는 여러 개의 외부 링크 버튼

다른 외부 페이지로 연결되는 여러 개의 버튼이있는 페이지가 있습니다. 아무 버튼이나 클릭하면 확인 상자가 나타나고 사용자가 확인을 클릭하면 특정 외부 링크로 연결됩니다. 지금은 하나의 링크에 대해 하드 코딩되었지만 각 버튼에 대한 링크를 설정하는 방법을 모르겠습니다.

링크는 현재 다음 라인에 설정되어 있습니다. window.location.href = 'https://www.sandbox.paypal.com/xxx';

기능 :

$(document).ready(function() { 
    $('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) { 
     e.preventDefault(); 

     // example of calling the confirm function 
     // you must use a callback function to perform the "yes" action 
     confirm("<h3 class='register'>Please read and understand the Terms of these lessons before purchasing...this is important.<br /><br />By purchasing these lessons, you agree that:</h2><ul class='popup'><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />You may reteach any material you have learned here, but you may NOT use the materials provided in the lessons to do so. In other words, you can do the lessons, learn the material, and teach your friend. You CAN NOT print out the transcriptions or download the videos and give them to a friend.</li><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />Derivative works are ok to produce, but you can not directly copy the musical examples and profit off them without the written consent of Joel Laviolette.</li></ul>", function() { 
      window.location.href = 'https://www.sandbox.paypal.com/xxx'; 
     }); 
    }); 
}); 

function confirm(message, callback) { 
    $('#confirm').modal({ 
     closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>", 
     position: ["20%",], 
     overlayId:'confirm-overlay', 
     containerId:'confirm-container', 
     onShow: function (dialog) { 
      $('.message', dialog.data[0]).append(message); 

      // if the user clicks "yes" 
      $('.yes', dialog.data[0]).click(function() { 
       // call the callback 
       if ($.isFunction(callback)) { 
        callback.apply(); 
       } 
       // close the dialog 
       $.modal.close(); 
      }); 
     } 
    }); 
}

HTML :

<div id='confirm-dialog'><h2>Confirm Override</h2> 
    <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p> 
    <input type='button' name='confirm' class='confirm' value='Demo'/> 

    </form> 
</div> 
<div id='confirm'> 
    <div class='header'><span>Confirm</span></div> 
    <p class='message'></p> 
    <div class='buttons'> 
    <div class='no simplemodal-close'>No</div><div class='yes'>OK 
        </div> 
    </div> 
</div>

도 아마 여기에 게시 너무 커서입니다 jquery.simplemodal.js 있습니다.

출처

2010-01-28 Joel

그래서 ... 모든 링크에 대해 확인 팝업을 첨부하고 싶습니까?

${"selector that returns all external links")

${"selector that returns all external links").click(function(e){ 
    e.preventDefault(); 
    confirm("Do you want to leave?", function() { 
      window.location.href = (e.target).attr('href'); 
    }); 
});

진짜 선택이 아니다. 찾고있는 버튼을 찾으려면 ${} 안에 올바른 것을 써야합니다. 샘플을 실행하려면

간단한 준비 =>

<html> 
<head>   
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> 
    <script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/scripts/jquery.simplemodal.js?ver=1.3.3'></script>   
</head> 
<body> 

<a class="external-link" href="http://www.google.com">google</a> 
<a class="external-link" href="http://www.bing.com">bing</a> 
<a class="external-link" href="http://www.yahoo.com">yahoo</a> 

<div id='modal' style='display: none; background: Silver;'> 
    <a href="#" class='simplemodal-close' id='yes'>leave</a> 
    <a href="#" class='simplemodal-close' id='no'>don't leave</a> 
</div> 

<script type='text/javascript'> 
$(".external-link").click(function(e){ //on external link click 
    e.preventDefault(); //cancel immediate redirect of link 
    $("#modal") //selecting modal window div 
     .data('href', $(this).attr('href')) //saving href to modal window itself 
     .modal(); //showing modal window 
}); 

$("#yes").click(function(){window.location=$("#modal").data('href')}); //if user clicks yes, redirect 
</script> 

</body> 
</html>

출처

2010-01-28 06:10:24

음 ...이 아니라 페이지에있는 모든 링크 (HTML 파일 및 오픈 저장). 각 페이팔 결제 버튼에 대한 링크를 window.location.href = 'https://www.sandbox.paypal.com/xxx'대신 사용하고 싶습니다. – Joel

jQuery 선택기 (http://api.jquery.com/category/selectors/)를 가지고 놀았습니까? 즉, 하나의 요소에 대한 클릭 핸들러와 요소 배열에 연결할 수 있습니다. 즉, 선택기가 반환하는 것입니다. 문제를 해결하는 열쇠는 찾고있는 페이팔 체크 아웃 버튼을 찾는 방법을 이해하는 것입니다. HTML 마크 업을 적어 두지 않았기 때문에 아무도 도움을받을 수 없습니다. –

코드를 포함시키지 않았다는 것이 확실하지 않은가요? html에서 위를보십시오. jquery.simplemodal.js에서 다루고있는 내용이 꽤 큰 것으로 생각합니다. 내가 뭘 찾고 있는지 잘 모르겠다. – Joel

jquery simpleModal 상자가있는 여러 개의 외부 링크 버튼

답변

관련 문제