ansaurus

Question

Javascript and CSS that can replace alerbox. Alert Box is so unprofessional.

Answer 1

+1 A:

Because of the way JavaScript event handling works, there cannot exist any "drop-in" replacement for confirm, but popular JavaScript libraries such as jQuery UI include "modal dialog" features that can be used to achieve a similar effect.

http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/ is an example of how this works. Your "delete" button would not be set up to submit the form but rather open the modal dialog, which would submit the form if the user clicks OK.

idealmachine 2010-10-31 15:58:48

Answer 2

A:

You can add onclick="deleteRow(row_id, this)" to each delete link. Usage of row_id assumes the table is being generated dynamically from a given set and you have an identifier to provide and pick the data to delete. The this is useful to remove the <tr> using Javascript.

Oh and of course the function would make a dialog popup. Use jQuery for that.

Júlio Santos 2010-10-31 15:58:53

Answer 3

A:

You can try FaceBox and FacyBox

http://chriswanstrath.com/facebox/

http://www.bitbonsai.com/facybox/

infinity 2010-10-31 15:59:19

Answer 4

+1 A:

Actually you could do

window.alert = function(text) { /* some code to show a fancy dialog */};
window.confirm = function(question) { /* some code to show a fancy dialog and return the result */}

Problem is you're messing around where ought not mess around but the advantage is that even in 3rd party code any alerts() or confirms() will come up as your custom dialogs and the code will be simple to read (instead of $.dialog({options}) you just use a normal alert() or confirm call)

Chris T 2010-10-31 16:06:33

This would definitely not work because of the way JavaScript handles clicks on buttons on the HTML page ("modal dialog" is irrelevant). See http://stackoverflow.com/questions/3886228/overriding-javascript-confirm-while-preserving-the-callback.

idealmachine 2010-10-31 16:08:17

Confirm would not work since that stops execution of JavaScript and waits for the return value of the conditional. You'd have to supply the code to execute depending on the result as a callback.

apphacker 2010-10-31 16:16:48

Answer 5

A:

You can rewrite the functionality. I am intending you wanna know what's happening and how to achieve effects, instead of using a library like jQuery. jQuery and derived solutions can make your life easier, but if you want to know HOW to make it, continue reading.

First, you should make your own "alertBox", with your preferred CSS styling (including it's position) [I suggest position absolute, z-index:2], then in the CSS let its display property as hidden.

OK, now when user clicks your delete link/button you trigger a native javascript confirm dialog. Replace this confirm call, to a function that will display your own styled menu. changing its CSS display property from hidden to "block".

On your own styled menu buttons Yes/No, attach events, one for each button, with respective action (hide menu, or deleting row, removing current line from table...).

Well, that's the idea. Hope you enjoy.

Dave 2010-10-31 16:12:15

Answer 6

A:

If you want really to look good try this approach:Use for example jQuery and jQueryUI.

In your page put this:

<head>
<link rel="stylesheet" type="text/css" media="all" href="pathtoyourappfolder/jquery/css/black-tie/jquery-ui-1.8.4.custom.css" />
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-1.4.2.min.js'" ></script>
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-ui-1.8.4.custom.min.js'" ></script>
</head>
<body>
  <div id="dialog-confirm" title="DELETE">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Are you sure you want to delete this record?</p>
  </div>

  <table id="TblName">
    <tr>
        <td class="actions">
            <a href="http://something/somethingelse/1" class="del">del</a>
        </td>
        <td>...</td>
    </tr>
    <tr>
        <td class="actions">
            <a href="http://something/somethingelse/2" class="del">del</a>
        </td>

        <td></td>
    </tr>   
  </table>

<script language="javascript" type="text/javascript">

 $(document).ready(function() {

        $('#TblName td.actions a.del').click(function(event){
            $("#dialog-confirm").dialog('open');
        });

 }

</script>
</body>

trix 2010-10-31 16:27:03

ansaurus

tags:

views:

answers:

Javascript and CSS that can replace alerbox. Alert Box is so unprofessional.

related questions