多個外部鏈接按鈕與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").click(function(e){ 
    e.preventDefault(); 
    confirm("Do you want to leave?", function() { 
      window.location.href = (e.target).attr('href'); 
    }); 
});

${"selector that returns all external links")

是不是一個真正的選擇。您需要在${}的內部編寫正確的內容才能找到您正在查找的按鈕。

簡單的準備好運行樣品（保存在HTML文件並打開）=>

<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

嗯......不是每個頁面上的鏈接。我想要每個paypal結帳按鈕的鏈接代替window.location.href ='https://www.sandbox.paypal.com/xxx'; – Joel 2010-01-28 06:15:26

你玩過jQuery選擇器（http://api.jquery.com/category/selectors/）嗎？事情是 - 你可以附加一個元素的點擊處理程序和元素數組 - 正確的選擇器返回。解決你的問題的關鍵是瞭解如何找到你正在尋找的那些paypal結賬按鈕。沒有人可以提供幫助，因爲你沒有在這裏寫過html標記。 – 2010-01-28 07:20:36

不確定你的意思是我沒有包含代碼？看看上面的HTML。我認爲你正在討論的內容是在jquery.simplemodal.js中處理的，它非常大。我不確定我在那裏尋找什麼。 – Joel 2010-01-28 07:54:57

多個外部鏈接按鈕與jquery simpleModal框

回答

相關問題