javascript alert with image

Question

I'm trying to change a basic javascript alert into a better looking one. At the moment the alert is created using

if(isset($_GET['return'])) {
    // get a random item
    $sql = "SELECT * 
    FROM pp_undergroundItems AS u
    LEFT JOIN pp_items AS i ON i.item_id = u.itemID
    WHERE :chance BETWEEN startChance AND endChance
    ORDER BY RAND() LIMIT 1";

    $q = $pdo->prepare($sql);
    $q->bindValue(':chance', $newChance);
    $q->execute();
    if($q->errorCode() != 0) {
         $errors = $q->errorInfo();
             echo($errors[2]);
    }
    $row = $q->fetch();
    if(count($row) > 0) {
        echo '<script type="text/javascript">alert("Item found: ' . $row["item_name"] . '"); </script>';**
    }
}

Now i'm trying to change it so that i get the item image and the name below it

I've found i can do it using jquery, i have it part working but not sure how to get it working the way i want

<script>
body {
  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
  font-size: 62.5%;
}
</script>
<script>
$(function() {
  $( "#dialog" ).dialog();
});
</script>

<div id="dialog" title="Underground" style="text-align: center;">
  <img src="/images/items/item1.png" alt="Image" /><br/>
    You found an item
</div>

The problem i'm having i show to make it show only when a link is pressed and how to show the items that has been selected from the database

css : `#dialog{ display : none}` // js : `onWhatEver(function(){$('#dialog').show()}) ` // API : http://api.jqueryui.com/dialog/ — singe batteur, Nov 18 '16 at 12:45

score 0 · Answer 1 · edited May 23 '17 at 12:13

I would suggest moving to a notification api, like this one: https://codeseven.github.io/toastr/

It allows for easy customization and is pretty common on the web now.

Here is the demo page:

http://codeseven.github.io/toastr/demo.html

and another answer with customization: Make toastr alerts look like bootstrap alerts

Here is another popular api, I haven't used it as much though: https://notifyjs.com/

javascript alert with image

1 Answers1