Upozornění a dialog

Modální upozornění:

  • $("#alert").hover(
      function() {
        alert("Your book is overdue.");
      }
    );

Modální upozornění vytvořené pomocí jQuery Dialog:

  • // Inserting modal information message when clicking on the link
      $('#dialog a').click(function(event) {
        var link = $(this).attr('href');
        // create message
        $(this).append('<div id="message" title="AKCE">Výprodej!</div>');
        // show message as dialog
        $(function() {
          $("#message").dialog({
            modal: true,
            resizable: false,
            buttons: {
              Ok: function() {
              // close dialog
              $(this).dialog("close");
              // execute a link
              location.href = link;
            }
          }
        });
      });
      // stop link execution
      return false; //event.preventDefault();
    });
    
  • Příklad CSS
  • .ui-dialog .ui-widget-header {
      background: #ffb321;
      color: #7f3300;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .ui-dialog .ui-button {
      background: #d6007f;
      color: #fff;
      box-shadow: none;
    }

Další možnosti: