Solved

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

Posted on 2016-08-20
6
126 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 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 109

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
google map tracking website 5 22
Changing alignment and creating border 6 27
php simple error message 4 23
Show tab when enter div and change underline color 3 23
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

785 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