CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3187075
user3187075

Reputation:

Does anyone know how can i modify alert box with css, or how can i made my own

Just don't suggest me jquery ui modal because i don't know how to modify and implement that thing! Alert box work perfect but it's little ugly, i want to style it and i know that is not maybe possible because it's system tool..i need help..that modal box need to be opened when form was submitted, she need to contain message like "your message has been sent!"..Thank you brothers

Code:

echo '
              <!-- Poruka o NEuspiješnosti slanja -->
              <script type="text/javascript">

              alert("Greška!\nMolimo Vas ispravno popunite obrazac.");

              </script>
              <!-- Kraj -->'; } // Kraj.

Upvotes: 0

Views: 286

Answers (4)

h0mayun
h0mayun

Reputation: 3601

somthing like this should work

$(document).ready(function()
{
      $('#form').submit(function(e)
       {
           e.preventDefault();
            modal();
        });
    $('.close').click(function()
      {
                          $('#alertBox').fadeOut()
       });
 });
function modal()
{
    $('#alertBox').fadeIn();
}

HTML

<div id="alertBox">
    <div class="inner">
        <div class="msg">your message has been sent!</div>
        <div class="close">close</div>
    </div>
</div>
<form id="form" method="post" action="">
    <input type="submit"/>
</form>

CSS

#alertBox{
    position:fixed;
    top:50%;
    left:50%;
    width:400px;
    height:200px;
    margin-left:-200px;
    margin-top:-200px;
    border:2px solid #ccc;
    background:#fafafa;
    display:none;
    font-size:18px;
    text-align:center;

}
.close{
 position:absolute;
 top:5px;
    right:5px;
    cursor:pointer
}
.inner{
    position:relative;
        padding-top:50px;
}

http://jsfiddle.net/9BrUN/1/

in your case Echo 

echo'
<script type="text/javascript">
$(document).ready(function(){modal()}});
<script>';

Upvotes: 0

Alex Saltykov
Alex Saltykov

Reputation: 63

You can use HTML Dialog element (www.w3.org), HTML Dialog element (html5rocks). You can style it with css, although it's not so widely supported now

Upvotes: 2

RazvanDH
RazvanDH

Reputation: 782

You cannot modify the alert box. Instead of alert, use something like:

jQuery:

  $('body').append('<div class="error"><span class="error_close">×</span>Greška!<br>Molimo Vas ispravno popunite obrazac.</div>');
$('.error_close').click(function(){$(this).parent().hide();});

CSS:

.error { position: fixed; z-index: 10000; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 400px; height: 100px; } 
.error_close { position: absolute; top: 5px; right: 5px; }

Upvotes: 0

Surjith S M
Surjith S M

Reputation: 6740

Simple Answer. No, You can't

Because Alertbox is system object, You cannot modify it with CSS or javascript.

The only way to do is, Use Jquery UI Dialog as you mentioned in your question.

Upvotes: 0

Related Questions