multiple external link buttons with jquery simpleModal box

Question

I learned how to pass the argument with a simpler javascript confirm box, but now I'm working with this SimpleModal script, and I'm a bit lost.

I have a page with several buttons that will link to different external pages. When I click any button, the confirm box will pop up and when user clicks ok, then they are taken to that specific external link. Right now, it's hard coded for one link, but I'm not sure how to set the link for each button.

The link is currently set on this line: window.location.href = ' https://www.sandbox.paypal.com/xxx ';

The function:

$(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>

There is also the jquery.simplemodal.js which is probably too big to post here.

Answer 1

So... you want to attach confirm popup for every link?

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

Is not a real selector. You need to write correct one inside ${} in order to find buttons you are looking for.

Simple ready to run sample (save in html file and open) =>

<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>

multiple external link buttons with jquery simpleModal box

Question

1 answers

solution1
0 2010-01-28 06:10:24

multiple external link buttons with jquery simpleModal box

Question

1 answers

solution1 0 2010-01-28 06:10:24

solution1
0 2010-01-28 06:10:24