How to change the style of alert box

Question

I need to change the style of the  OK  Button in an alert box    x000D   x000D   lt head gt  x000D       lt script type  text javascript  gt  x000D          function show alert     x000D              alert  Hello  I am an alert box     x000D            x000D       lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt input type  button  onclick  show alert    value  Show alert box    gt  x000D   lt  body gt  x000D   x000D   x000D

User · Accepted Answer

The alert box is a system object  and not subject to CSS  To do this style of thing you would need to create an HTML element and mimic the alert   functionality  The jQuery UI Dialogue does a lot of the work for you  working basically as I have described  Link    x000D   x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt title gt jQuery UI Dialog - Default functionality lt  title gt  x000D     lt link rel  stylesheet  href    code jquery com ui 1 12 1 themes base jquery-ui css  gt  x000D     lt link rel  stylesheet  href   resources demos style css  gt  x000D     lt script src  https   code jquery com jquery-1 12 4 js  gt  lt  script gt  x000D     lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt  x000D     lt script gt  x000D       function     x000D           dialog    dialog    x000D         x000D     lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D    x000D   lt div id  dialog  title  Basic dialog  gt  x000D     lt p gt This is the default dialog which is useful for displaying information  The dialog window can be moved  resized and closed with the  x  icon  lt  p gt  x000D   lt  div gt  x000D    x000D    x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I use SweetAlert  It s Awesome  You will get lots of customization option as well as all callbacks    swal  Here s a message     It s pretty  isn t it

User · Answer

Styling alert  -boxes ist not possible  You could use a javascript modal overlay instead

User · Answer

One option is to use altertify  this gives a nice looking alert box   Simply include the required libraries from here  and use the following piece of code to display the alert box   alertify confirm  This is a confirm dialog      function        alertify success  Ok           function        alertify error  Cancel            The output will look like this  To see it in action here is the demo

User · Answer

I know this is an older post but I was looking for something similar this morning  I feel that my solution was much simpler after looking over some of the other solutions   One thing is that I use font awesome in the anchor tag   I wanted to display an event on my calendar when the user clicked the event  So I coded a separate  lt div gt  tag like so    lt div id  eventContent  class  eventContent  style  display  none  border  1px solid  005eb8  position  absolute  background   fcf8e3  width  30   opacity  1 0  padding  4px  color   005eb8  z-index  2000  line-height  1 1em   gt           lt a style  float  right   gt  lt i class  fa fa-times closeEvent  aria-hidden  true  gt  lt  i gt  lt  a gt  lt br   gt          Event   lt span id  eventTitle  class  eventTitle  gt  lt  span gt  lt br   gt          Start   lt span id  startTime  class  startTime  gt  lt  span gt  lt br   gt          End   lt span id  endTime  class  endTime  gt  lt  span gt  lt br   gt  lt br   gt   lt  div gt    I find it easier to use class names in my jquery since I am using asp net   Below is the jquery for my fullcalendar app    lt script gt        document  ready function                 calendar   fullCalendar               googleCalendarApiKey   APIkey               header                    left   prev next today                   center   title                   right   month agendaWeek agendaDay                             events                    googleCalendarId    group calendar google com                             eventClick  function  calEvent  jsEvent  view                    var stime   calEvent start format  MM DD YYYY  h mm a                    var etime   calEvent end format  MM DD YYYY  h mm a                    var eTitle   calEvent title                  var xpos   jsEvent pageX                  var ypos   jsEvent pageY                      eventTitle   html eTitle                       startTime   html stime                       endTime   html etime                       eventContent   css  display    block                        eventContent   css  left    25                         eventContent   css  top    30                     return false                                        eventContent   click function                     eventContent   css  display    none                         lt  script gt    You must have your own google calendar id and api keys   I hope this helps when you need a simple popup display

User · Answer

I use AlertifyJS to style my dialogues   x000D   x000D  alertify alert  Ready     x000D  alertify YoutubeDialog    alertify dialog  YoutubeDialog  function    x000D      var iframe  x000D      return   x000D             dialog constructor function  this will be called when the user calls alertify YoutubeDialog videoId  x000D          main function videoId   x000D                set the videoId setting and return current instance for chaining  x000D              return this set    x000D                   videoId   videoId x000D                  x000D             x000D             we only want to override two options  padding and overflow   x000D          setup function    x000D              return   x000D                  options   x000D                        disable both padding and overflow control  x000D                      padding    1  x000D                      overflow   1  x000D                    x000D                 x000D             x000D             This will be called once the DOM is ready and will never be invoked again  x000D             Here we create the iframe to embed the video  x000D          build function               x000D                 create the iframe element x000D              iframe   document createElement  iframe    x000D              iframe frameBorder    no   x000D              iframe width    100    x000D              iframe height    100    x000D                 add it to the dialog x000D              this elements content appendChild iframe   x000D   x000D                give the dialog initial height  half the screen height   x000D              this elements body style minHeight   screen height    5    px   x000D             x000D             dialog custom settings x000D          settings   x000D              videoId undefined x000D             x000D             listen and respond to changes in dialog settings  x000D          settingUpdated function key  oldValue  newValue   x000D              switch key   x000D                 case  videoId   x000D                      iframe src    https   www youtube com embed     newValue     enablejsapi 1   x000D                  break     x000D                x000D             x000D             listen to internal dialog events  x000D          hooks   x000D                 triggered when the dialog is closed  this is seperate from user defined onclose x000D              onclose  function    x000D                  iframe contentWindow postMessage    event   command   func   pauseVideo   args             x000D                 x000D                 triggered when a dialog option gets update  x000D                 warning  this will not be triggered for settings updates  x000D              onupdate  function option oldValue  newValue   x000D                  switch option   x000D                      case  resizable   x000D                          if newValue   x000D                              this elements content removeAttribute  style    x000D                              iframe  amp  amp  iframe removeAttribute  style    x000D                           else  x000D                              this elements content style minHeight    inherit   x000D                              iframe  amp  amp   iframe style minHeight    inherit    x000D                            x000D                      break      x000D                        x000D                x000D            x000D         x000D      x000D    show the dialog x000D  alertify YoutubeDialog  GODhPuM5cEE   set  frameless true    x000D   lt  -- JavaScript -- gt  x000D   lt script src    cdn jsdelivr net npm alertifyjs 1 13 1 build alertify min js  gt  lt  script gt  x000D   lt  -- CSS -- gt  x000D   lt link rel  stylesheet  href    cdn jsdelivr net npm alertifyjs 1 13 1 build css alertify min css   gt  x000D   lt  -- Default theme -- gt  x000D   lt link rel  stylesheet  href    cdn jsdelivr net npm alertifyjs 1 13 1 build css themes default min css   gt  x000D   lt  -- Default theme -- gt  x000D   lt link rel  stylesheet  href    cdn jsdelivr net npm alertifyjs 1 13 1 build css themes default rtl min css   gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt head gt  x000D     x000D   x000D   lt link rel  stylesheet  href    code jquery com ui 1 11 4 themes smoothness jquery-ui css  gt  x000D     lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D     lt script src    code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt  x000D     x000D       lt script type  text javascript  gt  x000D     x000D   x000D    function     x000D           dialog    dialog   x000D        autoOpen  false  x000D        show    x000D          effect   blind   x000D          duration  1000 x000D           x000D        hide    x000D          effect   explode   x000D          duration  1000 x000D          x000D          x000D    x000D           opener    click function     x000D             dialog    dialog   open     x000D          x000D        x000D       lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D      lt div id  dialog  title  Basic dialog  gt  x000D      lt p gt This is an animated dialog which is useful for displaying information  The dialog window can be moved  resized and closed with the  x  icon  lt  p gt  x000D     lt  div gt  x000D    x000D     lt button id  opener  gt Open Dialog lt  button gt  x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Option1  you can use AlertifyJS   this is good for alert      Option2  you start up or just join a project based on webapplications  the design of interface is maybe good  Otherwise this should be changed  In order to Web 2 0 applications you will work with dynamic contents  many effects and other stuff  All these things are fine  but no one thought about to style up the JavaScript alert and confirm boxes  Here is the they way      create simple js file name jsConfirmStyle js  Here is simple js code  ie5  document getElementById amp  amp document all amp  amp document styleSheets  1 0  nn6  document getElementById amp  amp  document all  1 0   xConfirmStart 800  yConfirmStart 100   if ie5  nn6    if ie5  cs 2 th 30  else cs 0 th 20  document write        lt div id  jsconfirm  gt              lt table gt                  lt tr gt  lt td id  jsconfirmtitle  gt  lt  td gt  lt  tr gt                  lt tr gt  lt td id  jsconfirmcontent  gt  lt  td gt  lt  tr gt                  lt tr gt  lt td id  jsconfirmbuttons  gt                      lt input id  jsconfirmleft  type  button  value    onclick  leftJsConfirm    onfocus  if this blur this blur    gt                      amp nbsp  amp nbsp                      lt input id  jsconfirmright  type  button  value    onclick  rightJsConfirm    onfocus  if this blur this blur    gt                  lt  td gt  lt  tr gt              lt  table gt          lt  div gt                     document write   lt div id  jsconfirmfade  gt  lt  div gt       function leftJsConfirm     document getElementById  jsconfirm   style top -1000  document location href leftJsConfirmUri    function rightJsConfirm     document getElementById  jsconfirm   style top -1000  document location href rightJsConfirmUri    function confirmAlternative     if confirm  Scipt requieres a better browser           document location href  http   www mozilla org       leftJsConfirmUri       rightJsConfirmUri               Show the message confirm box    function showConfirm confirmtitle confirmcontent confirmlefttext confirmlefturi confirmrighttext confirmrighturi     document getElementById  jsconfirmtitle   innerHTML confirmtitle  document getElementById  jsconfirmcontent   innerHTML confirmcontent  document getElementById  jsconfirmleft   value confirmlefttext  document getElementById  jsconfirmright   value confirmrighttext  leftJsConfirmUri confirmlefturi  rightJsConfirmUri confirmrighturi  xConfirm xConfirmStart  yConfirm yConfirmStart  if ie5        document getElementById  jsconfirm   style left  25        document getElementById  jsconfirm   style top  35      else if nn6        document getElementById  jsconfirm   style top  25        document getElementById  jsconfirm   style left  35      else confirmAlternative        Create simple html file   lt html gt   lt head gt   lt title gt jsConfirmSyle lt  title gt   lt meta http-equiv  Content-Style-Type  content  text css    gt   lt meta http-equiv  Content-Script-Type  content  text javascript    gt   lt script type  text javascript  src  jsConfirmStyle js  gt  lt  script gt   lt script type  text javascript  gt    function confirmation      var answer   confirm  Wanna visit google     if  answer       window location    http   www google com           lt  script gt      lt style type  text css  gt      body     background-color  white     font-family  sans-serif       jsconfirm   border-color   c0c0c0  border-width  2px 4px 4px 2px  left  0  margin  0  padding  0  position  absolute  top  -1000px  z-index  100      jsconfirm table   background-color   fff  border  2px groove  c0c0c0  height  150px  width  300px      jsconfirmtitle   background-color   B0B0B0  font-weight  bold  height  20px  text-align  center      jsconfirmbuttons   height  50px  text-align  center      jsconfirmbuttons input   background-color   E9E9CF  color   000000  font-weight  bold  width  125px  height  33px  padding-left  20px      jsconfirmleft  background-image  url left png       jsconfirmright  background-image  url right png      lt  style gt             lt p gt   lt a href      onclick  javascript showConfirm  Please confirm   Are you really sure to visit google    Yes   http   www google com   No        gt JsConfirmStyled lt  a gt   lt  p gt   lt p gt  lt a href     onclick  confirmation    gt standard lt  a gt  lt  p gt     lt  body gt    lt  html gt

User · Answer

You need to create your own alert box like this    x000D   x000D  function jAlert text  customokay   x000D   document getElementById  jAlert content   innerHTML   text  x000D      document getElementById  jAlert ok   innerHTML   customokay  x000D      document body style backgroundColor    gray   x000D      document body style cursor  wait   x000D    x000D   x000D   x000D   x000D  jAlert  Stop  Stop      lt b gt Okay  lt  b gt     x000D   jAlert table   jAlert th   jAlert td  x000D      border  2px solid blue  x000D      background-color lightblue  x000D      border-collapse  collapse  x000D      width 100px  x000D    x000D   x000D   jAlert th   jAlert td  x000D      padding 5px  x000D      padding-right 10px  x000D      padding-left 10px  x000D    x000D   x000D   jAlert  x000D         Position fixed    x000D      position fixed  x000D         Center it     x000D      top  50   x000D      left  50   x000D      margin-top  -50px  x000D      margin-left  -100px  x000D    x000D   lt p gt TEXT lt  p gt  x000D   lt div id  jAlRem  gt  x000D       lt div id  jAlert  gt  x000D           lt table id  jAlert table  gt  x000D               lt tr id  jAlert tr  gt  x000D                   lt td id  jAlert td  gt    lt p id  jAlert content  gt  lt  p gt    lt  td gt  x000D                   lt td id  jAlert td  gt    lt button id  jAlert ok   onclick  jAlertagree    gt  lt  button gt    lt  td gt  x000D               lt  tr gt  x000D           lt  table gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   x000D   x000D   x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   lt p gt TEXT lt  p gt  x000D   x000D   x000D   lt script gt  x000D  function jAlertagree    x000D      var parent   document getElementById  jAlRem    x000D      var child   document getElementById  jAlert    x000D      parent removeChild child   x000D      document body style backgroundColor  white   x000D      document body style cursor  default   x000D    x000D   lt  script gt  x000D   x000D   x000D    The js portion gets the element in the HTML to create the alert box  then deletes it after the user clicks ok   You can call the alert using jAlert  Custom Text    Ok

User · Answer

I tried to use script for   alert   boxes styles using java-script Here i used those JS and CSS   Refer this coding JS functionality   var ALERT TITLE    Oops    var ALERT BUTTON TEXT    Ok    if document getElementById        window alert   function txt            createCustomAlert txt            function createCustomAlert txt        d   document       if d getElementById  modalContainer    return       mObj   d getElementsByTagName  body   0  appendChild d createElement  div         mObj id    modalContainer       mObj style height   d documentElement scrollHeight    px        alertObj   mObj appendChild d createElement  div         alertObj id    alertBox       if d all  amp  amp   window opera  alertObj style top   document documentElement scrollTop    px       alertObj style left    d documentElement scrollWidth - alertObj offsetWidth  2    px       alertObj style visiblity  visible        h1   alertObj appendChild d createElement  h1         h1 appendChild d createTextNode ALERT TITLE         msg   alertObj appendChild d createElement  p           msg appendChild d createTextNode txt        msg innerHTML   txt       btn   alertObj appendChild d createElement  a         btn id    closeBtn       btn appendChild d createTextNode ALERT BUTTON TEXT        btn href            btn focus        btn onclick   function     removeCustomAlert   return false         alertObj style display    block       function removeCustomAlert         document getElementsByTagName  body   0  removeChild document getElementById  modalContainer         And CSS for alert   Box   modalContainer       background-color rgba 0  0  0  0 3       position absolute      width 100       height 100       top 0px      left 0px      z-index 10000      background-image url tp png      required by MSIE to prevent actions on lower z-index elements        alertBox       position relative      width 300px      min-height 100px      margin-top 50px      border 1px solid  666      background-color  fff      background-repeat no-repeat      background-position 20px 30px      modalContainer  gt   alertBox       position fixed      alertBox h1       margin 0      font bold 0 9em verdana arial      background-color  3073BB      color  FFF      border-bottom 1px solid  000      padding 2px 0 2px 5px      alertBox p       font 0 7em verdana arial      height 50px      padding-left 5px      margin-left 55px      alertBox  closeBtn       display block      position relative      margin 5px auto      padding 7px      border 0 none      width 70px      font 0 7em verdana arial      text-transform uppercase      text-align center      color  FFF      background-color  357EBD      border-radius  3px      text-decoration none        unrelated styles      mContainer       position relative      width 600px      margin auto      padding 5px      border-top 2px solid  000      border-bottom 2px solid  000      font 0 7em verdana arial     h1 h2       margin 0      padding 4px      font bold 1 5em verdana      border-bottom 1px solid  000     code       font-size 1 2em      color  069      credits       position relative      margin 25px auto 0px auto      width 350px       font 0 7em verdana      border-top 1px solid  000      border-bottom 1px solid  000      height 90px      padding-top 4px      credits img       float left      margin 5px 10px 5px 0px      border 1px solid  000000      width 80px      height 79px      important       background-color  F5FCC8      padding 2px     code span       color green      And HTML file     lt input type  button  value    Test the alert  onclick  alert  Alert this pages       gt    And also View this DEMO  JSFIDDLE and DEMO RESULT IMAGE

User · Answer

I don t think you could change the style of browsers  default alert boxes    You need to create your own or use a simple and customizable library like xdialog  Following is a example to customize the alert box  More demos can be found here    x000D   x000D  function show alert     x000D      xdialog alert  Hello  I am an alert box     x000D    x000D   lt head gt  x000D       lt link rel  stylesheet  href  https   cdn jsdelivr net gh xxjapp xdialog 3 xdialog min css   gt  x000D       lt script src  https   cdn jsdelivr net gh xxjapp xdialog 3 xdialog min js  gt  lt  script gt  x000D       x000D       lt style gt  x000D           xd-content  xd-body  xd-body-inner   x000D              max-height  unset  x000D            x000D           xd-content  xd-body p   x000D              color   f0f  x000D              text-shadow  0 0 5px rgba 0  0  0  0 75   x000D            x000D           xd-content  xd-button xd-ok   x000D              background   734caf  x000D            x000D       lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt input type  button  onclick  show alert    value  Show alert box    gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

I use sweetalert2 library  It s really simple  a lot of customization  modern  animated windows  eye-catching  and also nice design    Swal fire     icon   error     title   Oops        text   Something went wrong      footer    lt a href gt Why do I have this issue  lt  a gt        Check this link

User · Answer

Not possible  If you want to customize the dialog s visual appearance  you need to use a JS-based solution like jQuery UI dialog

[javascript] How to change the style of alert box?

Examples related to javascript

Examples related to css