Toast

Pages

Users

Products

Notifications

Angelina Jolie

01:10 PM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Kate Winslet

05:09 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Johnny Depp

06:05 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Leonardo DiCaprio

05:09 AM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Johnny Depp

05:09 AM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Basic Textual Toast

Show example code

  // Non sticky version $("#basic-non-sticky-toast").on("click", function() { Toastify({ text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.", duration: 3000, newWindow: true, close: true, gravity: "bottom", position: "left", backgroundColor: "#0e2c88", stopOnFocus: true }).showToast(); }) // Sticky version $("#basic-sticky-toast").on("click", function() { Toastify({ text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.", duration: -1, newWindow: true, close: true, gravity: "bottom", position: "left", backgroundColor: "#0e2c88", stopOnFocus: true }).showToast(); })

Toast using HTML as a text

Show example code

  // Non sticky $("#html-non-sticky-toast").on("click", function() { Toastify({ node: $( "HTMLOpenTagspanHTMLCloseTagLet's test some HTML stuff... HTMLOpenTaga class="font-medium" href="#"HTMLCloseTagGithubHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/spanHTMLCloseTag"" )[0], duration: 3000, newWindow: true, close: true, gravity: "bottom", position: "left", backgroundColor: "#0e2c88", stopOnFocus: true }).showToast(); }) // sticky $("#html-sticky-toast").on("click", function() { Toastify({ node: $( "HTMLOpenTagspanHTMLCloseTagHTMLOpenTagstrongHTMLCloseTagRemember!HTMLOpenTag/strongHTMLCloseTag You can HTMLOpenTagspan class="font-medium"HTMLCloseTagalwaysHTMLOpenTag/spanHTMLCloseTag introduce your own × HTML and HTMLOpenTagspan class="font-medium"HTMLCloseTagCSSHTMLOpenTag/spanHTMLCloseTag in the toast.HTMLOpenTagspanHTMLCloseTag" )[0], duration: -1, newWindow: true, close: true, gravity: "bottom", position: "left", backgroundColor: "#0e2c88", stopOnFocus: true }).showToast(); })