PHP Web Developer
Web Development Information [PHP, DRUPAL, MYSQL, MAGENTO, JQUERY, JAVASCRIPT, CSS, HTML5]
Monday, September 26, 2011
Show CSS Light Box Alert When Disable Javascript
Show the lightbox when browser disables javascript. This attachment includes HTML and CSS code.
Steps to Implement:
Copy styles and
tag contents into your html file.</div><div>
</div><div>Example: </div><div>
</div><div>
</div><div><style></div><div>.black_overlay{</div><div>color:#FFFFFF; display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color:#C2C2C2;z-index:1001;-moz-opacity: 0.5;opacity:.50;filter: alpha(opacity=50);</div><div>}</div><div>.black_overlay_full{</div><div>color:#FFFFFF;display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 820px;_height: 833px;background-color:#C2C2C2;z-index:1001;-moz-opacity: .5;opacity:.50;filter: alpha(opacity=50);</div><div>}</div><div>.white_content {</div><div>display: none;position: absolute;top: 30%;left: 25%;width: 50%;min-height:30px;_height:120px auto;/*padding: 16px;*/padding:5px 10px;border: 3px solid #595959;z-index:1002;overflow: auto;background:#7C7C7C url(images/msg-strip.png) repeat-x;</div><div>}</div><div>.white_content table{</div><div>color:#FFFFFF;width:100%;text-align:center;</div><div>}</div><div>.white_content h5{</div><div>margin:0;color: #FFF;font-size: 12px;font-weight: bold;text-align:center;</div><div>}</div><div>.note{text-align: left;color: #CCCCCC;font-size: 11px;font-weight: normal;}</div><div>.noscript{display:block;}</div><div></style></div><div>
</div><div><noscript></div><div><div id="nojs" class="white_content noscript"></div><div><div class="msg-alert"></div><div><div class="msginfo"><h5>Please enable Javascript and refresh.<h5></div></div><div><div class="note"><b>INTERNET EXPLORER:</b><br /></div><div> » Select 'Tools' from the top menu<br /></div><div> » Choose 'Internet Options'<br /></div><div> » Click on the 'Security' tab<br /></div><div> » Click on 'Custom Level'<br /></div><div> » Scroll down until you see section labled 'Scripting'<br /></div><div> » Under 'Active Scripting', select 'Enable' and click OK<br /><br /></div><div>
</div><div><b>MOZILLA FIREFOX:</b><br /></div><div> » Select 'Tools' from the top menu<br /></div><div> » Choose 'Options'<br /></div><div> » Choose 'Content' from the top Icon<br /></div><div> » Select the checkbox 'Enable JavaScript' and click OK<br /></div><div>
</div><div></div></div><div></div></div><div></div></div><div><div id="nojs" class="black_overlay noscript"></div></div><div>
No comments:
Post a Comment
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment