How to present a modal when Axios catch gives a 404 error

@vincej msg is a div, msg is the id.

So:

var div = document.getElementById('msg');
 div.innerHTML += "Not Authorized";

Is just putting the text "Not Authorized" in that division.

For a modal you have display:none until you wish to display it.

@vincej another quick example:

CSS

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #dddddd; /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #E5E5E5; /*#fefefe;*/
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    /*width: 80%;*/
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

View

        <div>

            <div id="myModal" class="modal">


                <div class="modal-content" style="width: 70%;" id="somediv" title="whatever">
                    <span id="modalspan" class="close" onclick="closeModal()" >&times;</span>
                    <object style="width: 98%; margin: auto;" id="dialog" height="300"></object>
                </div>

            </div>

        </div>

JS

            function showBal()
            {
                var url = '<?php echo DIR . "check/balance"; ?>';
                var modal = document.getElementById("myModal");
                var span = document.getElementsByClassName("close")[0];
                document.getElementById("myModal").style.display = "block";
                //document.getElementById("thedialog").src = url;  //If using iframe
                document.getElementById("dialog").data = url;    //object used so use data
                 
            }

Just some code I already have, but you'd skip the object part if just adding a message into the division.

@vincej basically:

Just quick example with just some test data. The species is required.

But it's better to just show errors in a div, not modal that way they can correct while still viewing errors.

Basically I

    //var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];
    document.getElementById("myModal").style.display = "block";
    var somediv = document.getElementById("somediv");
         for (var key in data) {
             somediv.innerHTML += data[key]; // adjust here with space as needed.
         }

I just gave the modal-content div an id of somediv in example.

@vincej if you have to have it in bootstrap, get a modal working first, then it's just a matter of putting your text in.

But it's easier just to "unhide" a div and show message, no modal. Just my suggestion.

Edit

Bear in mind the code was just an example, you can easily change to:

if (response.status === 403 || response.status === 500) {
// other code here to open modal

I would suggest have a message to contact server admin also. Because a production server shouldn't be getting such errors.

Perhaps in some cases you want to throw a 403 if someone who is not authorized attempts to go to a certain page. But their I show a "You are not authorized here" type message.

A 404 you can have a custom page: https://developer.mozilla.org/en-US/docs/web/http/status/404 then load it in an object inside modal. But it's rare to get such errors on a production server. I'd consider more testing and debugging to see why it happens.

@jlrdw So, in conclusion, I gave up trying to get a model to work in Axios. I appears to be very happy to call JQuery addclass() method, but not append() or html() with a bunch of Bootstrap html in it . So, I just solved the problem by creating a class 'center-page' with a 999 z-index. That way to alert will float over the text. For me, that's good enough. I don't have time to mess with this detail. Thanks Again for all your effort!

axios.post('/submitTimes', {
            child_id:id,
            timeIn:DBtime
        }).then(function (response) {
            

        })["catch"](function (error) {
            $("tr.child td.checkboxIn input").filter(function (index) {
                return $(this).attr("id") == id;
            }).val(time).css({"color": "red","text-align":"center",
                "border":"2px solid red"});
             $("div.comsAlert").addClass("alert alert-danger center_page").text('There is a communications failure. Please Refresh the page, and try again. Alternatively register with paper and pen');
        });