有谁知道如何用css修改警报框，或者我怎样才能创建自己的警报框

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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>';

Answer 4

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; }