How to make a browser message popup jquery

Question

I want to know how to make a css styled box pop up on load that tells you the browser you are using. I have the browser identification code, but I don't know how to make the popup appear on load. Popup that's all I have:

$(document).ready(function() {});

Browser detect:

function myFunction() { if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) { alert('Opera'); } else if(navigator.userAgent.indexOf("Chrome") != -1 ) { alert('Chrome'); } else if(navigator.userAgent.indexOf("Safari") != -1) { alert('Safari'); } else if(navigator.userAgent.indexOf("Firefox") != -1 ) { alert('Firefox'); } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10 { alert('IE'); } else { alert('unknown'); } }

Answer 1

My proposal is, without using jQuery ui dialog and using only css to build the popup:

 function myFunction() { if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) { return'Opera'; } else if (navigator.userAgent.indexOf("Chrome") != -1) { return 'Chrome'; } else if (navigator.userAgent.indexOf("Safari") != -1) { return 'Safari'; } else if (navigator.userAgent.indexOf("Firefox") != -1) { return 'Firefox'; } else if ((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) { //IF IE > 10 return 'IE'; } return 'unknown'; } function popupClose() { $('#popup').hide(); } $(function () { $('.content').text(myFunction()); }); 

 .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: visible; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background:slategray; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; text-align: center; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; text-align: center; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } } 

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <div id="popup" class="overlay"> <div class="popup"> <h2>Browser</h2> <a class="close" href="javascript:popupClose();">×</a> <div class="content"> </div> </div> </div> 

Answer 2

My popup function from: https://jsfiddle.net/mm7b7t5t/

(Supports draggable popups, multiple buttons, forms, returns the button clicked etc etc)

With the following code:

var browserPopup = new popup([{text: "Close"}], "Browser", "<p>"+browserName()+"</p>");
browserPopup.open();

function browserName() {
  if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
    return'Opera';
  } else if (navigator.userAgent.indexOf("Chrome") != -1) {
    return 'Chrome';
  } else if (navigator.userAgent.indexOf("Safari") != -1) {
    return 'Safari';
  } else if (navigator.userAgent.indexOf("Firefox") != -1) {
    return 'Firefox';
  } else if ((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) { //IF IE > 10
    return 'IE';
  }
  return 'unknown';
}