jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Templates
  • Download

jQWidgets Mobile Demos

  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • ASP .NET MVC
  • Templates
  • Theme Builder
Show Demo List

Web UI Widgets

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxScheduler
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTouch
  • jqxTreeGrid
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxDataTable
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxTreeMap
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxEditor
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxDataAdapter
  • jqxRibbon
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxResponse
  • jqxLayout
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxDockingLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel

jqxNotification

  • Default Functionality
Theme:
iOS
  • Demo
  • View Source
  • API Reference
View in full screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta name="msapplication-tap-highlight" content="no" />
<title id='Description'>jQWidgets Notification - Mobile Example
</title>
<link rel="stylesheet" href="../styles/demo.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../simulator.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
<script type="text/javascript" src="../simulator.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = prepareSimulator("notification");
var quotes = ["I'm gonna make him an offer he can't refuse.", "Toto, I've got a feeling we're not in Kansas anymore.", "You talkin' to me?", "Bond. James Bond.", "I'll be back.", "Round up the usual suspects.", "I'm the king of the world!", "A martini. Shaken, not stirred.", "May the Force be with you.", "Well, nobody's perfect."];
$("#jqxNotification").jqxNotification({ theme: theme, width: "100%", appendContainer: "#notificationContainer", opacity: 0.9, autoClose: true, template: "info" });
$("#openNotification").jqxButton({ theme: theme });
$("#openNotification").click(function () {
$("#notificationContent").html(quotes[Math.round(Math.random() * quotes.length)]);
$("#jqxNotification").jqxNotification("open");
});
initSimulator("notification");
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<div style="overflow: hidden; width: 90%; height: 100%; margin-left: 5%; margin-right: 5%;">
<div id="jqxNotification">
<div id="notificationContent">
</div>
</div>
<button style="margin-top: 10px;" id="openNotification">
Open notification</button>
<div id="notificationContainer" style="width: 100%; height: 450px; margin-top: 15px; background-color: #F2F2F2; border: none; overflow: auto;">
</div>
</div>
</div>
</div>
</body>
</html>
jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.