Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Is there a way I can make this alert a little more pretty?

Posted on 2016-08-20
6
Medium Priority
?
239 Views
Last Modified: 2016-08-22
Here's the code that I'm using right now that's working great...

if($_SESSION['guarantor_session']['PaymentWithin30Days']==0)
			{
				$javascript_message="<script>";
				$javascript_message.="alert(\"Hello, ";
				$javascript_message.=$firstname;
				$javascript_message.="!\\n\\nJust a reminder - You have made a payment within the last 30 days according to our system.\\n\\nThanks!";
				$javascript_message.="\")</script>";
				echo $javascript_message;
			}	

Open in new window


In the end, it looks like this:

localhost says...
If one can be satisfied with a purely utilitarian look, this is great. If, however, you want to try and dress it up, here's where I'm running into some problems.

I've been able to determine that you can't customize an alert, at least not in basic JavaScript. Still, I'm wondering if there isn't something I could do, perhaps through CSS or something that would allow me to better match the color scheme of the actual site or just get rid of the verbiage that says, "localhost" says.

I've seen several things via google, but I want to hear from some specific sources that can give me some options so the end result looks better. The functionality works great, I just want a better looking alert.

How?
0
Comment
Question by:brucegust
6 Comments
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 248 total points
ID: 41764038
Unfortunately, alert message boxes are proprietary to the browser. We have no control of how they are displayed.
1
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 248 total points
ID: 41764043
Kim is right, there is nothing but 'plain text' in an alert box.  You would have to do a modal or something else that you do have control over.
1
 
LVL 11

Assisted Solution

by:Jeffrey Dake
Jeffrey Dake earned 248 total points
ID: 41764070
http://noelboss.github.io/featherlight/

This is a pretty good JavaScript solution that will let you style your pop up any way you want, plus the out of the box solution is a lot better than ever using a JavaScript alert
1
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 111

Accepted Solution

by:
Ray Paseur earned 1008 total points
ID: 41764227
Agree with the other comments about a modal window vs an "alert" -- the "alert" is a crude debugging tool, similar in scope and function to console.log.  You can write directly into a DOM element, too.  Here are docs about some examples:
http://www.w3schools.com/js/js_output.asp

With the modal, you can put almost anything you want into the modal box.  Here's an example where I put an entire video into a popup / overlay window. :-)
https://iconoun.com/demo/popup_video_example.php
<!DOCTYPE html>
<!-- https://www.experts-exchange.com/questions/28964572/Is-there-a-way-I-can-make-this-alert-a-little-more-pretty.html
<!-- http://iconoun.com/demo/popup_video_example.php
  -->
<html dir="ltr" lang="en-US">
<head>

<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experimental Popup / Overlay Video</title>

<style type="text/css">
/* TRANSLUCENT OVERLAY GRAYS-OUT THE VIEWPORT */
.spw_overlay {
    width: 100%;
    background: rgba(0,0,0,.6);
    position: absolute;
    left: 0;
    top: 0;
}

/* CONTAINER FOR THE VIDEO - ROUNDED CORNERS */
.spw_videobox {
    position: absolute;
    background: white;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
}

/* THE VIDEO INSIDE THE VIDEO BOX CONTAINER */
.spw_videobox video {
    width: 640px;
}

/* SMALL CIRCLE-X AT UPPER RIGHT OF VIDEOBOX - IE CANNOT USE CLEAR-TEXT SVG; REQUIRES BASE64_ENCODE() */
.spw_close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -12px;
    right: -12px;
    display: block;
    border-radius: 12px;
 /* background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5" y="18" font-size="18" font-family="verdana" font-weight="bold" fill="gray">X</text></svg>') no-repeat center center; */
    background: white url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUiIHk9IjE4IiBmb250LXNpemU9IjE4IiBmb250LWZhbWlseT0idmVyZGFuYSIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9ImdyYXkiPlg8L3RleHQ+PC9zdmc+') no-repeat center center;
}
.spw_close:hover {
    cursor: pointer;
 /* background: gray url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5" y="18" font-size="18" font-family="verdana" font-weight="bold" fill="white">X</text></svg>') no-repeat center center; */
    background: gray url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUiIHk9IjE4IiBmb250LXNpemU9IjE4IiBmb250LWZhbWlseT0idmVyZGFuYSIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIj5YPC90ZXh0Pjwvc3ZnPg==') no-repeat center center;
}
</style>

</head>

<body>
<div class="wrapper">
  <header>
    <div class="container">
    <h1 class="col-lg-9">Video Windows</h1>
    </div>
  </header>
  <div class="container">
  <p>Click on the link below to view video and description in a popup</p>

    <ul>
      <li><a class="spw_video-link" href="http://techslides.com/demos/sample-videos/small.mp4" data-description="This is the description for sample video #2">HTML5 Video 2</a></li>
      <li><a class="spw_iframe-link" href="https://www.youtube.com/embed/zr9leP_Dcm8?autoplay=1" width="620" height="315" data-description="This is the YouTube video #3">Youtube Iframe embed</a></li>
    </ul>

  </div><!-- /container -->
</div><!-- /wrapper -->
<footer>
</footer>

<script src="https://code.jquery.com/jquery.js"></script>

<script>
$(function(){

    // ESCAPE KEY WILL REMOVE THE OVERLAY
    $(document).on('keyup',function(e){
        if (e.keyCode == 27) {
            $('.spw_overlay').remove();
        }
    });

    // CLICK ON THE OVERLAY OR CLOSE BUTTON BODY WILL REMOVE THE OVERLAY
    $('body').on('click', '.spw_overlay, .spw_close', function(){
        $('.spw_overlay').remove();
    });

    // CLICK ON THE VIDEOBOX ONLY AFFECTS VIDEOBOX: http://www.w3schools.com/JQuery/event_stoppropagation.asp
    $('body').on('click','.spw_videobox', function(e){
        e.stopPropagation();
    });

    // FOR HTML5 VIDEO TAGS
    $('.spw_video-link').click(function(e){
        var el = $(this);

        // TURN OFF THE EXPECTED ACTION (REDIRECT BROWSER TO LINK)
        e.preventDefault();

        // CREATE THE VBOX DOM ELEMENT
        var vbox =  $('<div/>').addClass('spw_videobox');

        // ADD CLOSE-LINK, VIDEO BOX, AND DESCRIPTION
        vbox.append($('<a/>').addClass('spw_close'));
        vbox.append($('<video/>').prop({autoplay: true, controls: true}).attr('src', el.attr('href')));
        vbox.append($('<div/>').html(el.data('description')));

        // GRAY OUT THE BODY, THEN ADD THE VBOX DOM ELEMENT
        $('body').append(
            $('<div class="spw_overlay"/>').height(Math.max($(document).height(), $(window).height()))
            .append( vbox ) );

        // POSITION THE VBOX NEAR THE TOP CENTER
        var left = ($(window).width() - vbox.width()) >> 1;
        var top  = $(window).scrollTop() + 50;
        vbox.css({
            left: left + 'px',
            top: top + 'px'
        });
    });

    // FOR IFRAME EMBEDDING
    $('.spw_iframe-link').click(function(e){
        var el = $(this);

        // TURN OFF THE EXPECTED ACTION (REDIRECT BROWSER TO LINK)
        e.preventDefault();

        // CREATE THE FBOX DOM ELEMENT
        var fbox =  $('<div/>').addClass('spw_videobox');

        // ADD CLOSE-LINK, IFRAME, AND DESCRIPTION
        fbox.append($('<a/>').addClass('spw_close'));
        fbox.append($('<iframe/>').attr('src', el.attr('href')).attr('width', '640').attr('height', '360'));
        fbox.append($('<div/>').html(el.data('description')));

        // GRAY OUT THE BODY, THEN ADD THE FBOX DOM ELEMENT
        $('body').append(
            $('<div class="spw_overlay"/>').height(Math.max($(document).height(), $(window).height()))
            .append( fbox ) );

        // POSITION THE FBOX NEAR THE TOP CENTER
        var left = ($(window).width() - fbox.width()) >> 1;
        var top  = $(window).scrollTop() + 50;
        fbox.css({
            left: left + 'px',
            top: top + 'px'
        });
    });
});
</script>

</body>
</html>

Open in new window

0
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 248 total points
ID: 41764325
I usually use sweetalert2: it's really fine.
0
 

Author Comment

by:brucegust
ID: 41765399
Thank you, folks! I've determined to pursue the "modal" route. I have a question about how to fire that functionality using $(document).ready(function) and I've got that at https://www.experts-exchange.com/questions/28964731/How-can-I-get-this-function-to-trigger-as-soon-as-the-page-loads.html. Feel free to weigh in.

Thanks, again!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question