CODEWITHSUNDEEP
javascriptfirefoxpopupalertblocking
Matt Deemer
Matt Deemer

Reputation: 133

Users blocking javascript popup boxes

I'm struggling on my website with members selecting in Firefox/Chrome etc to disable popup boxes / javascript alerts.

I use alert boxes to confirm things like, for example, if someone wants to delete a message.

However, if they delete a few messages too fast one after the other then Firefox etc gives the option to block further javascript alerts. Then my members can no longer delete their messages.

I'm sure they can fix it client-side, but what can I do server-side to stop members being given the option to block javascript alerts?

Thanks Matt

Upvotes: 1

Views: 2756

Answers (3)

DomantasJ1
DomantasJ1

Reputation: 133

you can use a custom confirm/alert/prompt box here is an example i have made just note the css animations was some experimenting i was doing you dont need to include these

<!DOCTYPE html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="customAlert.css" />
    <title>Custom Alert</title>
    </head>
    <body>


        <div id="customAlertOverlay"></div>
        <div id="customAlertBox">
            <div>
                <div id="customAlertHead"></div>
                <div id="customAlertBody"></div>
                <div id="customAlertFoot"></div>
            </div>
        </div>

        <p>other content</p>
        <button onclick="cAlert('Error', 'Message')">click me</button>
        <script src="customAlert.js" type="text/javascript"></script>
    </body>
</html>

css:

 #customAlertOverlay{
        display: none; 
        opacity: 0; 
        position: fixed; 
        top: 0px; 
        left: 0px; 
        background: #FFF; 
        width: 100%; 
        z-index: 9;
        animation : cAlertFlash linear 1s infinite; 
    }
    #customAlertBox{ 
        display: none; 
        position: fixed; 
        background:#FFF; 
        border-radius:7px; 
        width:550px; 
        z-index: 10;
        top:30%;
    }
    #customAlertBox > div{ 
        background:black; 
        margin:8px; 
        border-radius: 10px;
        border:5px solid black;
    }
    #customAlertBox > div > #customAlertHead{ 
        border-radius:10px 10px 0 0;
        background: #FF6600; /*FF7112*/ 
        font-size:19px; 
        padding:10px; 
        color:black;
        text-align: center;
    } 
    #customAlertBox > div > #customAlertBody{ 
        background:#FF6600; 
        padding:20px; 
        color:black; 
    }
     #customAlertBox > div > #customAlertFoot{
        background: #FF7112; 
        padding:10px; 
        text-align:center;
        border-radius: 0 0 10px 10px;
    }
    #customAlertBox > div > #customAlertFoot:hover{
        background: #FF5E5E;
        border-top: black 1px solid;
    }
    @keyframes cAlertFlash {
        0% {opacity: 0.1;}
        25% {opacity: 0.75;}
        50%{opacity: .75;}
        100%{opacity: .1;}
    }

javascript:

function cAlert(headMSG, bodyMSG){
    var customAlertOverlay = document.getElementById("customAlertOverlay");
    var customAlertBox = document.getElementById("customAlertBox");
    var winH = window.innerHeight;
    var winW = window.innerWidth;
    var customAlertHead = document.getElementById("customAlertHead");
    var customAlertBody = document.getElementById("customAlertBody");
    var customAlertFoot = document.getElementById("customAlertFoot");
    customAlertOverlay.style.height = winH+"px";
    customAlertBox.style.left = ((winW/2) - (550/2)) +"px";
    customAlertHead.innerHTML = headMSG;
    customAlertBody.innerHTML = bodyMSG;
    $("#customAlertOverlay").slideDown("fast");
    $("#customAlertBox").slideDown("fast");
    customAlertFoot.innerHTML = "Ok";
}


$(document).ready(function(){
    $("#customAlertBox").draggable();
    $(document).on("click", "#customAlertFoot", function(){
        $("#customAlertOverlay").slideUp("fast");
        $("#customAlertBox").slideUp("fast");
    });
});

FIDDLE - working with exception of dialog close

Upvotes: 0

Wes Copeland
Wes Copeland

Reputation: 361

I'm not sure that default browser alerts/popups are a great way to go from a UX perspective. Browsers typically block them for a very good reason - ads.

You might be interested in a library called alertify.js (http://fabien-d.github.io/alertify.js/).

Creating alerts with this library is pretty simple, and browsers will not block them:

alertify.alert("Hello World");

Confirm dialogs like what you mentioned in your question are pretty simple too:

alertify.confirm("Are you sure you want to delete the message?", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});

Upvotes: 1

Logan Murphy
Logan Murphy

Reputation: 6230

I whipped this together quickly if you do not want a heavy footprint (Not really styled either). But you can put raw html into your confirm boxes with this code.

HTML

<div id="confirm">
    <div class="message"></div>
    <button onclick="$('#confirm').hide()[0].success();">Ok</button>
    <button onclick="$('#confirm').hide()[0].failure();">Cancel</button>    
</div>

JS

var $confirm = $("#confirm");    
function confirm(msg, success, failure) {
    $confirm.find(".message").html(msg);
    $confirm.show();
    $confirm[0].success = success;
    $confirm[0].failure = failure;
}

CSS

#confirm {
    display : none;
    width : 100px;
    height : 100px;
    position : fixed;
    border : 1px solid black;
    top : 5px;
    right : 5px;
}

http://jsfiddle.net/hVC5A/4/

Upvotes: 0

Related Questions