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

#jquery #jquery-ui-dialog

Вопрос:

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

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

Могу ли я в любом случае создать это так, чтобы это выполнялось при нажатии на 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>

Ответ №1:

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

 <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 является важной частью, поскольку она предотвращает выполнение действия anchors по умолчанию.

1. Да, но как я могу создать диалоговое окно. Например, я не понимаю, как я заполняю внутреннюю часть диалогового окна, не связывая его с тегом div.

2. ну, если вы используете jquery ui и у вас уже есть диалоговое окно, вы можете «открыть» его, просто вызвав $ (бла). диалоговое окно (‘открыть’). это может быть то, что указано в теле обработчика кликов выше.

3. Большое спасибо. Извините, я сначала этого не понял.

4. 1 за операцию, поскольку они хотели сделать это для вас, но у них не хватило репутации. =D

Ответ №2:

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

У вас может быть следующий HTML:

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

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

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