JQuery - сделать диалог пользовательского интерфейса на href - PullRequest
Новая
       7

JQuery - сделать диалог пользовательского интерфейса на href

1 голос
/ 25 мая 2011

Итак, у меня есть это прямо здесь:

Это очень простой диалог пользовательского интерфейса, который ведет обратный отсчет, пока мой пользователь не будет перенаправлен.Если они щелкают за пределами поля, оно отменяется.

Можно ли в любом случае создать это так, чтобы это было сделано по щелчку URL-адреса?

Я также хочу передать один параметр (URL, на который будет перенаправлен пользователь)

<!DOCTYPE html>
<html>
<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>



  <script type="text/javascript">
    function setClosed(){
      isClosed=true;
    }
    function alertBlah() {   
       if (!isClosed)
   $(location).attr('href',"http://www.google.com").delay(3000);
}

   //Wait for the document to load
   $(document).ready(function() {
      isClosed=false;

  //Create the dialog and open it
  $("#dialog").dialog();
  $("p.5").fadeOut(0).delay(500).fadeIn(400);
  $("font.4").fadeOut(0).delay(1000).fadeIn(400);
  $("font.3").fadeOut(0).delay(1500).fadeIn(400);
  $("font.2").fadeOut(0).delay(2000).fadeIn(400);
  $("font.1").fadeOut(0).delay(2500).fadeIn(400);
  $("h2.by").fadeOut(0).delay(3000).fadeIn(400);

  setTimeout(alertBlah,3500);

  //Bind to the ui-widget-overlay and watch for when it is clicked
  $('.ui-widget-overlay').live("click", function() {
     //Close the dialog
     $("#dialog").dialog("close");
     setClosed();

  }); 


  });

 </script>
 </head>

 <body style="font-size:62.5%;">




   <div class="ui-widget-overlay" >
      <a href="#" class="close">Leave My Site</a>

      <div id="dialog" class="flora" title="Leaving my site" ><center>Leaving in...
         <font class="5">5..</font>
         <font class="4">4..</font>
         <font class="3">3..</font>
         <font class="2">2..</font>
         <font class="1">1..</font>

  </br>
  <h2 class="by">Good By!</h2>
  </center>
</div>

Ответы [ 2 ]

2 голосов
/ 25 мая 2011

Допустим, у вас есть якорь: 

<a href="#" class="close">Leave My Site</a>

Вы можете сделать что-то вроде: 

$('a.close').click(function(e){
    //$(this) would be your anchor
    //awesome magic here
    e.preventDefault();
});

e.preventDefault является важной частью, поскольку она предотвращает действие по умолчанию якорей отслучается.

1 голос
/ 25 мая 2011

Посмотрите эту рабочую демонстрацию jsFiddle:

Вы можете иметь следующий HTML-код: 

<a href="http://www.google.com">Exit to Google</a>
<a href="http://www.stackoverflow.com">Exit to StackOverflow</a>

Тогда существующий JavaScript, который у вас есть в разделе головы, можно изменить следующим образом: 

function setClosed() { 
    isClosed = true; 
}

function alertBlah() {
    if (!isClosed) { $(location).attr('href', url).delay(3000); } 
}

$(function() {

    $("a").click(function(e) {

        e.preventDefault();

        isClosed = false;
        url = this.href;

        //Create the dialog and open it
        $("#dialog").dialog();
        $("p.5").fadeOut(0).delay(500).fadeIn(400);
        $("font.4").fadeOut(0).delay(1000).fadeIn(400);
        $("font.3").fadeOut(0).delay(1500).fadeIn(400);
        $("font.2").fadeOut(0).delay(2000).fadeIn(400);
        $("font.1").fadeOut(0).delay(2500).fadeIn(400);
        $("h2.by").fadeOut(0).delay(3000).fadeIn(400);

        setTimeout(alertBlah,3500);

        //Bind to the ui-widget-overlay and watch for when it is clicked
        $('.ui-widget-overlay').live("click", function() {
            //Close the dialog
            $("#dialog").dialog("close");
            setClosed();
        });
    }); 
});
...