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

Question

我学习了如何通过一个更简单的javascript确认框传递参数，但是现在我正在使用这个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，可能太大了，无法在此处发布。

Answer 1

所以...您想为每个链接附加确认弹出窗口吗？

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

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

问题描述

1 个解决方案

解决方案1
0 2010-01-28 06:10:24

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

问题描述

1 个解决方案

解决方案1 0 2010-01-28 06:10:24

解决方案1
0 2010-01-28 06:10:24