Toastr通知が右下に表示されない

Question

Toastr通知（https://github.com/CodeSeven/toastr）を使用しようとしています。彼らは正常に動作しますが、問題はそれらが右上にのみ表示されることです。私はポジションについては何でも変えることができますが、常に右上に表示されます。私は同じ問題を抱える少数の人々を見つけましたが、解決策は私のためには機能しませんでした。

これを修正する方法があれば誰かが私のコードをチェックしてください。

/* 
 
* Toastr 
 
* Copyright 2012-2014 John Papa and Hans Fjällemark. 
 
* All Rights Reserved. 
 
* Use, reproduction, distribution, and modification of this code is subject to the terms and 
 
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php 
 
* 
 
* Author: John Papa and Hans Fjällemark 
 
* ARIA Support: Greta Krafsig 
 
* Project: https://github.com/CodeSeven/toastr 
 
*/ 
 
; (function (define) { 
 
    define(['jquery'], function ($) { 
 
     return (function() { 
 
      var $container; 
 
      var listener; 
 
      var toastId = 0; 
 
      var toastType = { 
 
       error: 'error', 
 
       info: 'info', 
 
       success: 'success', 
 
       warning: 'warning' 
 
      }; 
 

 
      var toastr = { 
 
       clear: clear, 
 
       remove: remove, 
 
       error: error, 
 
       getContainer: getContainer, 
 
       info: info, 
 
       options: {}, 
 
       subscribe: subscribe, 
 
       success: success, 
 
       version: '2.0.3', 
 
       warning: warning 
 
      }; 
 

 
      return toastr; 
 

 
      //#region Accessible Methods 
 
      function error(message, title, optionsOverride) { 
 
       return notify({ 
 
        type: toastType.error, 
 
        iconClass: getOptions().iconClasses.error, 
 
        message: message, 
 
        optionsOverride: optionsOverride, 
 
        title: title 
 
       }); 
 
      } 
 

 
      function getContainer(options, create) { 
 
       if (!options) { options = getOptions(); } 
 
       $container = $('#' + options.containerId); 
 
       if ($container.length) { 
 
        return $container; 
 
       } 
 
       if(create) { 
 
        $container = createContainer(options); 
 
       } 
 
       return $container; 
 
      } 
 

 
      function info(message, title, optionsOverride) { 
 
       return notify({ 
 
        type: toastType.info, 
 
        iconClass: getOptions().iconClasses.info, 
 
        message: message, 
 
        optionsOverride: optionsOverride, 
 
        title: title 
 
       }); 
 
      } 
 

 
      function subscribe(callback) { 
 
       listener = callback; 
 
      } 
 

 
      function success(message, title, optionsOverride) { 
 
       return notify({ 
 
        type: toastType.success, 
 
        iconClass: getOptions().iconClasses.success, 
 
        message: message, 
 
        optionsOverride: optionsOverride, 
 
        title: title 
 
       }); 
 
      } 
 

 
      function warning(message, title, optionsOverride) { 
 
       return notify({ 
 
        type: toastType.warning, 
 
        iconClass: getOptions().iconClasses.warning, 
 
        message: message, 
 
        optionsOverride: optionsOverride, 
 
        title: title 
 
       }); 
 
      } 
 

 
      function clear($toastElement) { 
 
       var options = getOptions(); 
 
       if (!$container) { getContainer(options); } 
 
       if (!clearToast($toastElement, options)) { 
 
        clearContainer(options); 
 
       } 
 
      } 
 

 
      function remove($toastElement) { 
 
       var options = getOptions(); 
 
       if (!$container) { getContainer(options); } 
 
       if ($toastElement && $(':focus', $toastElement).length === 0) { 
 
        removeToast($toastElement); 
 
        return; 
 
       } 
 
       if ($container.children().length) { 
 
        $container.remove(); 
 
       } 
 
      } 
 
      //#endregion 
 

 
      //#region Internal Methods 
 

 
      function clearContainer(options){ 
 
       var toastsToClear = $container.children(); 
 
       for (var i = toastsToClear.length - 1; i >= 0; i--) { 
 
        clearToast($(toastsToClear[i]), options); 
 
       }; 
 
      } 
 

 
      function clearToast($toastElement, options){ 
 
       if ($toastElement && $(':focus', $toastElement).length === 0) { 
 
        $toastElement[options.hideMethod]({ 
 
         duration: options.hideDuration, 
 
         easing: options.hideEasing, 
 
         complete: function() { removeToast($toastElement); } 
 
        }); 
 
        return true; 
 
       } 
 
       return false; 
 
      } 
 

 
      function createContainer(options) { 
 
       $container = $('<div/>') 
 
        .attr('id', options.containerId) 
 
        .addClass(options.positionClass) 
 
        .attr('aria-live', 'polite') 
 
        .attr('role', 'alert'); 
 

 
       $container.appendTo($(options.target)); 
 
       return $container; 
 
      } 
 

 
      function getDefaults() { 
 
       return { 
 
        tapToDismiss: true, 
 
        toastClass: 'toast', 
 
        containerId: 'toast-container', 
 
        debug: false, 
 

 
        showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery 
 
        showDuration: 300, 
 
        showEasing: 'swing', //swing and linear are built into jQuery 
 
        onShown: undefined, 
 
        hideMethod: 'fadeOut', 
 
        hideDuration: 1000, 
 
        hideEasing: 'swing', 
 
        onHidden: undefined, 
 

 
        extendedTimeOut: 1000, 
 
        iconClasses: { 
 
         error: 'toast-error', 
 
         info: 'toast-info', 
 
         success: 'toast-success', 
 
         warning: 'toast-warning' 
 
        }, 
 
        iconClass: 'toast-info', 
 
        positionClass: 'toast-top-right', 
 
        timeOut: 5000, // Set timeOut and extendedTimeout to 0 to make it sticky 
 
        titleClass: 'toast-title', 
 
        messageClass: 'toast-message', 
 
        target: 'body', 
 
        closeHtml: '<button>&times;</button>', 
 
        newestOnTop: true 
 
       }; 
 
      } 
 

 
      function publish(args) { 
 
       if (!listener) { return; } 
 
       listener(args); 
 
      } 
 

 
      function notify(map) { 
 
       var options = getOptions(), 
 
        iconClass = map.iconClass || options.iconClass; 
 

 
       if (typeof (map.optionsOverride) !== 'undefined') { 
 
        options = $.extend(options, map.optionsOverride); 
 
        iconClass = map.optionsOverride.iconClass || iconClass; 
 
       } 
 

 
       toastId++; 
 

 
       $container = getContainer(options, true); 
 
       var intervalId = null, 
 
        $toastElement = $('<div/>'), 
 
        $titleElement = $('<div/>'), 
 
        $messageElement = $('<div/>'), 
 
        $closeElement = $(options.closeHtml), 
 
        response = { 
 
         toastId: toastId, 
 
         state: 'visible', 
 
         startTime: new Date(), 
 
         options: options, 
 
         map: map 
 
        }; 
 

 
       if (map.iconClass) { 
 
        $toastElement.addClass(options.toastClass).addClass(iconClass); 
 
       } 
 

 
       if (map.title) { 
 
        $titleElement.append(map.title).addClass(options.titleClass); 
 
        $toastElement.append($titleElement); 
 
       } 
 

 
       if (map.message) { 
 
        $messageElement.append(map.message).addClass(options.messageClass); 
 
        $toastElement.append($messageElement); 
 
       } 
 

 
       if (options.closeButton) { 
 
        $closeElement.addClass('toast-close-button').attr("role", "button"); 
 
        $toastElement.prepend($closeElement); 
 
       } 
 

 
       $toastElement.hide(); 
 
       if (options.newestOnTop) { 
 
        $container.prepend($toastElement); 
 
       } else { 
 
        $container.append($toastElement); 
 
       } 
 

 

 
       $toastElement[options.showMethod](
 
        { duration: options.showDuration, easing: options.showEasing, complete: options.onShown } 
 
       ); 
 

 
       if (options.timeOut > 0) { 
 
        intervalId = setTimeout(hideToast, options.timeOut); 
 
       } 
 

 
       $toastElement.hover(stickAround, delayedHideToast); 
 
       if (!options.onclick && options.tapToDismiss) { 
 
        $toastElement.click(hideToast); 
 
       } 
 

 
       if (options.closeButton && $closeElement) { 
 
        $closeElement.click(function (event) { 
 
         if(event.stopPropagation) { 
 
          event.stopPropagation(); 
 
         } else if(event.cancelBubble !== undefined && event.cancelBubble !== true) { 
 
          event.cancelBubble = true; 
 
         } 
 
         hideToast(true); 
 
        }); 
 
       } 
 

 
       if (options.onclick) { 
 
        $toastElement.click(function() { 
 
         options.onclick(); 
 
         hideToast(); 
 
        }); 
 
       } 
 

 
       publish(response); 
 

 
       if (options.debug && console) { 
 
        console.log(response); 
 
       } 
 

 
       return $toastElement; 
 

 
       function hideToast(override) { 
 
        if ($(':focus', $toastElement).length && !override) { 
 
         return; 
 
        } 
 
        return $toastElement[options.hideMethod]({ 
 
         duration: options.hideDuration, 
 
         easing: options.hideEasing, 
 
         complete: function() { 
 
          removeToast($toastElement); 
 
          if (options.onHidden && response.state !== 'hidden') { 
 
           options.onHidden(); 
 
          } 
 
          response.state = 'hidden'; 
 
          response.endTime = new Date(); 
 
          publish(response); 
 
         } 
 
        }); 
 
       } 
 

 
       function delayedHideToast() { 
 
        if (options.timeOut > 0 || options.extendedTimeOut > 0) { 
 
         intervalId = setTimeout(hideToast, options.extendedTimeOut); 
 
        } 
 
       } 
 

 
       function stickAround() { 
 
        clearTimeout(intervalId); 
 
        $toastElement.stop(true, true)[options.showMethod](
 
         { duration: options.showDuration, easing: options.showEasing } 
 
        ); 
 
       } 
 
      } 
 

 
      function getOptions() { 
 
       return $.extend({}, getDefaults(), toastr.options); 
 
      } 
 

 
      function removeToast($toastElement) { 
 
       if (!$container) { $container = getContainer(); } 
 
       if ($toastElement.is(':visible')) { 
 
        return; 
 
       } 
 
       $toastElement.remove(); 
 
       $toastElement = null; 
 
       if ($container.children().length === 0) { 
 
        $container.remove(); 
 
       } 
 
      } 
 
      //#endregion 
 

 
     })(); 
 
    }); 
 
}(typeof define === 'function' && define.amd ? define : function (deps, factory) { 
 
    if (typeof module !== 'undefined' && module.exports) { //Node 
 
     module.exports = factory(require('jquery')); 
 
    } else { 
 
     window['toastr'] = factory(window['jQuery']); 
 
    } 
 
}));

.toast-title { 
 
    font-weight: bold; 
 
} 
 
.toast-message { 
 
    -ms-word-wrap: break-word; 
 
    word-wrap: break-word; 
 
} 
 
.toast-message a, 
 
.toast-message label { 
 
    color: #ffffff; 
 
} 
 
.toast-message a:hover { 
 
    color: #cccccc; 
 
    text-decoration: none; 
 
} 
 
.toast-close-button { 
 
    position: relative; 
 
    right: -0.3em; 
 
    top: -0.3em; 
 
    float: right; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #ffffff; 
 
    -webkit-text-shadow: 0 1px 0 #ffffff; 
 
    text-shadow: 0 1px 0 #ffffff; 
 
    opacity: 0.8; 
 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
 
    filter: alpha(opacity=80); 
 
} 
 
.toast-close-button:hover, 
 
.toast-close-button:focus { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    opacity: 0.4; 
 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); 
 
    filter: alpha(opacity=40); 
 
} 
 
/*Additional properties for button version 
 
iOS requires the button element instead of an anchor tag. 
 
If you want the anchor version, it requires `href="#"`.*/ 
 
button.toast-close-button { 
 
    padding: 0; 
 
    cursor: pointer; 
 
    background: transparent; 
 
    border: 0; 
 
    -webkit-appearance: none; 
 
} 
 
.toast-top-center { 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
} 
 
.toast-bottom-center { 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
} 
 
.toast-top-full-width { 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
} 
 
.toast-bottom-full-width { 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
} 
 
.toast-top-left { 
 
    top: 12px; 
 
    left: 12px; 
 
} 
 
.toast-top-right { 
 
    top: 12px; 
 
    right: 12px; 
 
} 
 
.toast-bottom-right { 
 
    right: 12px; 
 
    bottom: 12px; 
 
} 
 
.toast-bottom-left { 
 
    bottom: 12px; 
 
    left: 12px; 
 
} 
 
#toast-container { 
 
    position: fixed; 
 
    z-index: 999999; 
 
    pointer-events: none; 
 
    /*overrides*/ 
 
} 
 
#toast-container * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#toast-container > div { 
 
    position: relative; 
 
    pointer-events: auto; 
 
    overflow: hidden; 
 
    margin: 0 0 6px; 
 
    padding: 15px 15px 15px 50px; 
 
    width: 300px; 
 
    -moz-border-radius: 3px 3px 3px 3px; 
 
    -webkit-border-radius: 3px 3px 3px 3px; 
 
    border-radius: 3px 3px 3px 3px; 
 
    background-position: 15px center; 
 
    background-repeat: no-repeat; 
 
    -moz-box-shadow: 0 0 12px #999999; 
 
    -webkit-box-shadow: 0 0 12px #999999; 
 
    box-shadow: 0 0 12px #999999; 
 
    color: #ffffff; 
 
    opacity: 0.8; 
 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
 
    filter: alpha(opacity=80); 
 
} 
 
#toast-container > :hover { 
 
    -moz-box-shadow: 0 0 12px #000000; 
 
    -webkit-box-shadow: 0 0 12px #000000; 
 
    box-shadow: 0 0 12px #000000; 
 
    opacity: 1; 
 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    filter: alpha(opacity=100); 
 
    cursor: pointer; 
 
} 
 
#toast-container > .toast-info { 
 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; 
 
} 
 
#toast-container > .toast-error { 
 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; 
 
} 
 
#toast-container > .toast-success { 
 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; 
 
} 
 
#toast-container > .toast-warning { 
 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; 
 
} 
 
#toast-container.toast-top-center > div, 
 
#toast-container.toast-bottom-center > div { 
 
    width: 300px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#toast-container.toast-top-full-width > div, 
 
#toast-container.toast-bottom-full-width > div { 
 
    width: 96%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.toast { 
 
    background-color: #030303; 
 
} 
 
.toast-success { 
 
    background-color: #51a351; 
 
} 
 
.toast-error { 
 
    background-color: #bd362f; 
 
} 
 
.toast-info { 
 
    background-color: #2f96b4; 
 
} 
 
.toast-warning { 
 
    background-color: #f89406; 
 
} 
 
.toast-progress { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 4px; 
 
    background-color: #000000; 
 
    opacity: 0.4; 
 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); 
 
    filter: alpha(opacity=40); 
 
} 
 
/*Responsive Design*/ 
 
@media all and (max-width: 240px) { 
 
    #toast-container > div { 
 
    padding: 8px 8px 8px 50px; 
 
    width: 11em; 
 
    } 
 
    #toast-container .toast-close-button { 
 
    right: -0.2em; 
 
    top: -0.2em; 
 
    } 
 
} 
 
@media all and (min-width: 241px) and (max-width: 480px) { 
 
    #toast-container > div { 
 
    padding: 8px 8px 8px 50px; 
 
    width: 18em; 
 
    } 
 
    #toast-container .toast-close-button { 
 
    right: -0.2em; 
 
    top: -0.2em; 
 
    } 
 
} 
 
@media all and (min-width: 481px) and (max-width: 768px) { 
 
    #toast-container > div { 
 
    padding: 15px 15px 15px 50px; 
 
    width: 25em; 
 
    } 
 
}

<head> 
 
    <title>Toastr</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
\t 
 
\t <link href="build/toastr.css" rel="stylesheet" /> 
 
\t <script src="toastr.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
<div class="container-fluid"> 
 
    <h1>Toastr</h1> 
 
</div> 
 

 
<!-- Toastr --> 
 
<script type="text/javascript"> 
 
setTimeout('first()', 3000); 
 
function first() 
 
{ 
 
Command: toastr["success"]("Are you the six fingered man?") 
 

 
toastr.options = { 
 
    "closeButton": false, 
 
    "debug": false, 
 
    "newestOnTop": false, 
 
    "progressBar": false, 
 
    "positionClass": "toast-bottom-right", 
 
    "preventDuplicates": false, 
 
    "onclick": null, 
 
    "showDuration": "300", 
 
    "hideDuration": "1000", 
 
    "timeOut": "5000", 
 
    "extendedTimeOut": "1000", 
 
    "showEasing": "swing", 
 
    "hideEasing": "linear", 
 
    "showMethod": "fadeIn", 
 
    "hideMethod": "fadeOut" 
 
} 
 
} 
 
</script> 
 
<!-- Toastr --> 
 
</body> 
 
</html>

Answer 1

<html> 
 
<head> 
 
    <title>Toastr</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> 
 
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
     <h1>Toastr bottom test</h1> 
 
    </div> 
 

 
    
 
    <script type="text/javascript"> 
 
    $(function() { 
 

 
     function Toast(type, css, msg) { 
 
      this.type = type; 
 
      this.css = css; 
 
      this.msg = 'This is positioned in the ' + msg + '. You can also style the icon any way you like.'; 
 
     } 
 

 
     var toasts = [ 
 
      new Toast('error', 'toast-bottom-full-width', 'This is positioned in the bottom full width. You can also style the icon any way you like.'), 
 
      new Toast('info', 'toast-top-full-width', 'top full width'), 
 
      new Toast('warning', 'toast-top-left', 'This is positioned in the top left. You can also style the icon any way you like.'), 
 
      new Toast('success', 'toast-top-right', 'top right'), 
 
      new Toast('warning', 'toast-bottom-right', 'bottom right'), 
 
      new Toast('error', 'toast-bottom-left', 'bottom left') 
 
     ]; 
 

 
     toastr.options.positionClass = 'toast-top-full-width'; 
 
     toastr.options.extendedTimeOut = 0; //1000; 
 
     toastr.options.timeOut = 1000; 
 
     toastr.options.fadeOut = 250; 
 
     toastr.options.fadeIn = 250; 
 

 
     var i = 0; 
 

 
     delayToasts(); 
 

 
     function delayToasts() { 
 
      if (i === toasts.length) { return; } 
 
      var delay = i === 0 ? 0 : 2100; 
 
      window.setTimeout(function() { showToast(); }, delay); 
 

 
      // re-enable the button   
 
      if (i === toasts.length-1) { 
 
       window.setTimeout(function() { 
 
        $('#tryMe').prop('disabled', false); 
 
        i = 0; 
 
       }, delay + 1000); 
 
      } 
 
     } 
 

 
     function showToast() { 
 
      var t = toasts[i]; 
 
      toastr.options.positionClass = t.css; 
 
      toastr[t.type](t.msg); 
 
      i++; 
 
      delayToasts(); 
 
     } 
 
    }) 
 
    </script> 
 

 
</body> 
 

 
</html>