Solved

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

Posted on 2016-08-20
6
191 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 22

Assisted Solution

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

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 62 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 10

Assisted Solution

by:Jeffrey Dake
Jeffrey Dake earned 62 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 110

Accepted Solution

by:
Ray Paseur earned 252 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 62 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

630 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