Javascript 带有jquery SimpleModel框的多个外部链接按钮_Javascript_Jquery

Javascript 带有jquery SimpleModel框的多个外部链接按钮

javascript jquery

Javascript 带有jquery SimpleModel框的多个外部链接按钮,javascript,jquery,Javascript,Jquery,我学习了如何使用更简单的javascript确认框传递参数，但现在我正在使用这个SimpleModel脚本，我有点迷路了我有一个带有几个按钮的页面，可以链接到不同的外部页面。当我单击任何按钮时，确认框将弹出，当用户单击确定时，它们将被带到特定的外部链接。现在，它是硬编码的一个链接，但我不知道如何设置每个按钮的链接链接当前设置在此行上： window.location.href='' 职能： $(document).ready(function () { $('#confirm-dia

我学习了如何使用更简单的javascript确认框传递参数，但现在我正在使用这个SimpleModel脚本，我有点迷路了

我有一个带有几个按钮的页面，可以链接到不同的外部页面。当我单击任何按钮时，确认框将弹出，当用户单击确定时，它们将被带到特定的外部链接。现在，它是硬编码的一个链接，但我不知道如何设置每个按钮的链接

链接当前设置在此行上： window.location.href=''

职能：

$(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();
            });
        }
    });
}

还有jquery.simplemodal.js，它可能太大了，无法在这里发布。

所以。。。是否要为每个链接附加确认弹出窗口

${"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文件中并打开）=>


$（“.external link”）。单击（函数（e）{//在外部链接上单击
e、 preventDefault（）；//取消链接的立即重定向
$（“#模态”）//选择模态窗口div
.data（'href'，$（this.attr（'href'））//将href保存到模式窗口本身
.modal（）；//显示模式窗口
});
$（“#是”）。单击（function（）{window.location=$（“#modal”）.data（'href'）}）//如果用户单击“是”，则重定向

嗯……不是页面上的每个链接都有。我希望每个paypal结账按钮的链接取代window.location.href=''；您是否使用过jQuery选择器（）？问题是——您可以为一个元素和元素数组附加click处理程序——选择器返回的是正确的。解决问题的关键是了解如何找到您正在寻找的paypal结账按钮。没有人能帮你，因为你没有在这里写它们的html标记。不确定我没有包含代码是什么意思？查看上面的html。我认为你所说的东西是在jquery.simplemodal.js中处理的，它非常大。我不确定我在找什么。那是模态弹出窗口中的一个按钮。我所说的按钮，将使模态弹出显示。据我所知，您的意图是询问用户在单击外部链接时是否真的想离开。

${"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>
 <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>