TechQA.

How to make bootstrap 4 dismissible alert close permanently

273 views Asked by At

I have a MediaWiki site, and literally all I want to do is make a bootstrap 4 alert visible for any new visitors on certain pages, but stay permanently gone when it is dismissed. The alert would be transcluded to multiple pages, but if dismissed should no longer appear on any of them. I've found lots of answers for how to do this, but I don't understand javascript at all so I can't figure out how to use them, and copy/pasting the solutions isn't working. The alert displays and can be closed, but it's visible again if the page is refreshed/revisited. This is my very basic code:

<div style="border: 1px solid black; border-radius: 10px; color: black; background: white; padding: 10px 25px 10px 15px; max-width: 600px;" class="alert alert-success alert-dismissible"><span style="font-size: 1em; color: white; background: blue; border-radius: 20px; padding: 8px;" class="close" data-dismiss="alert" aria-label="close">Dismiss</span>Testing text.</div>

I've tried reversing this issue because I want it to stay closed: My Bootstrap alert will not display after being closed

I've tried copying this code but it didn't work with my alert: Using Bootstrap, have alert box remember close action

I've also tried copying the both cookie and local storage versions of this question's answer and it didn't work with my alert: Bootstrap 4 alert permanently closed with a cookie

Every single code I tried did not keep the alert from re-appearing every time after a refresh or a page revisit.

javascript bootstrap-4 alert dismissible
Original Q&A
1

There are 1 answers

1
KakashiJack On

A dismissible alert its only for allow to close it, if you need display an alert and remember the choice, you need cookies or local storage and some javascript interaction like:

<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</head>

<body>
    <div id="wellcome-message"
        style="display: none; border: 1px solid black; border-radius: 10px; color: black; background: white; padding: 10px 25px 10px 15px; max-width: 600px;"
        class="alert alert-success alert-dismissible"><span
            style="font-size: 1em; color: white; background: blue; border-radius: 20px; padding: 8px;" class="close"
            data-dismiss="alert" aria-label="close">Dismiss</span>Testing text.</div>
    <script>
        function IsValidJsonString(Input) {
            try {
                JSON.parse(Input);
            } catch (ex) {
                return false;
            }
            return true;
        }
        var Base64 = {
            _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
            encode: function (input) {
                var output = "";
                var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                var i = 0;
                input = Base64._utf8_encode(input);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                        this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                        this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
                }
                return output;
            },
            decode: function (input) {
                var output = "";
                var chr1, chr2, chr3;
                var enc1, enc2, enc3, enc4;
                var i = 0;
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
                while (i < input.length) {
                    enc1 = this._keyStr.indexOf(input.charAt(i++));
                    enc2 = this._keyStr.indexOf(input.charAt(i++));
                    enc3 = this._keyStr.indexOf(input.charAt(i++));
                    enc4 = this._keyStr.indexOf(input.charAt(i++));
                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;
                    output = output + String.fromCharCode(chr1);
                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }
                }
                output = Base64._utf8_decode(output);
                return output;
            },
            _utf8_encode: function (string) {
                string = string.replace(/\r\n/g, "\n");
                var utftext = "";
                for (var n = 0; n < string.length; n++) {
                    var c = string.charCodeAt(n);
                    if (c < 128) {
                        utftext += String.fromCharCode(c);
                    } else if ((c > 127) && (c < 2048)) {
                        utftext += String.fromCharCode((c >> 6) | 192);
                        utftext += String.fromCharCode((c & 63) | 128);
                    } else {
                        utftext += String.fromCharCode((c >> 12) | 224);
                        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }
                }
                return utftext;
            },
            _utf8_decode: function (utftext) {
                var string = "";
                var i = 0;
                var c = c1 = c2 = 0;
                while (i < utftext.length) {
                    c = utftext.charCodeAt(i);
                    if (c < 128) {
                        string += String.fromCharCode(c);
                        i++;
                    } else if ((c > 191) && (c < 224)) {
                        c2 = utftext.charCodeAt(i + 1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        i += 2;
                    } else {
                        c2 = utftext.charCodeAt(i + 1);
                        c3 = utftext.charCodeAt(i + 2);
                        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                        i += 3;
                    }
                }
                return string;
            }
        };
        setLocalStorage = function (c_name, value, exdays) {
            if (value === null || value === undefined) {
                window.localStorage.removeItem(c_name);
                window.localStorage.removeItem(c_name + "_expire");
            } else {
                window.localStorage.setItem(c_name, Base64.encode(JSON.stringify(value)));
                var exdate = new Date();
                exdate.setDate(exdate.getDate() + ($.isNumeric(exdays) ? exdays : 0));
                window.localStorage.setItem(c_name + "_expire", Base64.encode(exdate.toUTCString()));
            }
        };
        getLocalStorage = function (c_name) {
            var _time = window.localStorage.getItem(c_name + "_expire")
            var _value = window.localStorage.getItem(c_name);
            try {
                if (_time !== null && _time !== undefined) {
                    if (Date.parse(Base64.decode(_time)) <= new Date()) {
                        window.localStorage.removeItem(c_name + "_expire");
                        window.localStorage.removeItem(c_name);
                        return null;
                    } else {
                        if (IsValidJsonString(Base64.decode(_value)))
                            return JSON.parse(Base64.decode(_value));
                    }
                }
            } catch (ex) {
                return null;
            }
            return null;
        };
        $(function () {
            if (!getLocalStorage("WellcomeMessage"))
                $("#wellcome-message").show();
            $("#wellcome-message span.close").click(function () {
                setLocalStorage("WellcomeMessage", true, 999999);
            });
        });
    </script>
</body>

</html>

Tested ;)

Related Questions in JAVASCRIPT

Related Questions in BOOTSTRAP-4

Related Questions in ALERT

Related Questions in DISMISSIBLE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions