show message with image in div when js is disabled

Question

show message with image in div when js is disabled

Navigation

#1 by (0 votes)

0

I have a website whose functionalities use jQuery, I send information through JSOn and I also use jQuery Datatables so it is important that the user has JS enabled in their browser and before that I have been explicitly specified the way I should show the message to the user in case you do not have javascript enabled: the entire blank web page, present a centered image and the message to the user that must activate javascript.

I used this div first (inside noscript tags) to put the whole home page blank and show the message, I found it here

 <div style="position: fixed; top: 0px; left: 0px; z-index: 3000;
                height: 100%; width: 100%; background-color: #FFFFFF">
                <p style="margin-left: 10px">JavaScript is not enabled.</p>
            </div>

and it showed me the whole blank page as I wanted and the message in the upper left, now, I'm not good at css but I know some bootstrap so try this to show a centered image and the message under the image

<div style="position: center; top: 0px; left: 0px; z-index: 3000;
            height: 100%; width: 100%; background-color: #FFFFFF">
                <div class="jumbotron">
                    <div class="container">
                        <div style="position: center; top: 0px; left: 0px; z-index: 3000;
            height: 100%; width: 100%; background-color: #FFFFFF">
                            <img src="~/Imagenes/logo%20empresa.png" class="img-responsive" />
                            <p style="margin-left: 10px">
                                Para utilizar las funcionalidades completas de este sitio es necesario tener
                                JavaScript habilitado. Aquí están las <a href="http://www.enable-javascript.com/es/"
                                                                         target="_blank">instrucciones para habilitar JavaScript en tu navegador web</a>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

and if you show me the image and the message centered but the background is white and shows me under this message the home page and what I'm looking for is that only the message is shown and everything else on the blank home page.

could you help me please.

javascript jquery html datatables

asked by Pablo Mayora 23.05.2017 в 20:24

source

1 answer

Error when wanting to edit row in GridView with ASP.Net external server XML

score 0 · Accepted Answer

Seeing what you need would be this way:

HTML:

<noscript>
    <div class="enable">
        <div class="enable-center">
            <span>JavaScript is not enabled.</spanp>
        </div>
    </div>
</noscript>

CSS:

.enable {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    color: black;
    font-size: 24px;
    z-index: 999;
}

.enable-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}