CODEWITHSUNDEEP
javascript
user3337667
user3337667

Reputation: 161

can i create custom confirm box in pure javascript (without using jquery) work same as window.confirm?

in confirm.js there is code like this page(http://www.developphp.com/view.php?tid=1385(dialog.js))

i want to do some operations in php (like deleting records from database & like submitting form) after clicking on yes button and after no it should return false

is this possible?

<script type="text/javascript" src="confirm.js"></script>
<script type="text/javascript">
function validation()
{
    if(document.getElementById('tbox').value=='')
    {
        alert('enter value');
        return false;
    }
    else
    {
        confirm.render('','','sub_btn');
    }
}
</script>
<form method="get">
    <table width="100%" height="500px" z-index="500000" style="background:yellow;">
        <tr>
            <td>
                <input type="text" id="tbox">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" id="sub_btn" value="Submit" onclick="return validation()">
            </td>
        </tr>
    </table>
</form>

Upvotes: 1

Views: 8851

Answers (3)

Nairit
Nairit

Reputation: 11

Hi my following comments were deleted. So now that I have found a solution I will give it to all of you below the comments:

I have created a custom confirm box code in pure javascript that looks and works great. It is too easy. But the problem is that if I have to take 2 confirmations from the user on the same web page, then I have to write separate set of functions(2 for each set with different function names).

I do not see how callback can help me to solve my problem. The callback function also gets executed immediately without waiting to check whether the user clicked on Confirm or Cancel button.

Can I pass the callback function name to another function that uses setTimeOut() and waits say 15 minutes for the user to click on Confirm or Cancel? On click of the buttons I can record the user's choice in a global variable and clearTimeOut() to execute the next part immediately. After 15 minutes if no user response is got then let it be treated as response Cancel which should be safe. Anyone wants to try and solve this?

I don't touch or read jQuery, Angular etc. Please leave me out of those discussions.

OK HERE IS THE SOLUTION. The main file is customConfirm.htm :-

<html>
<head>
<style>
/* ~~~~~~~~~~~~~~~ Style for the pop box with blackener ~~~~~~~~~~~~~~~~~~~ */
.popBoxStyle { position: absolute; text-align: center;

visibility:hidden;
z-index: 2000;                                                              /* Nairit: Set high so that shows over page contents */
cursor: default;

background-color: #FFFFFF;
border:2px solid;
border-color: #6F7072;
border-radius:6px;                              /* More gives rounder edges */
box-shadow: 10px 10px 5px #606060;              /* Shadow can be used when black overlay is not used on the rest of the page. Or black has low opacity */

filter:alpha(opacity=100);                                          /* Works in IE */
opacity:1.0;                                                        /* Works in others. This is for the opacity of the box's background */

padding:3px;
}

.liner { clear:both; height:1px; background-color:#cccccc; }
.spacer { clear:both; height:5px; }

.black { position:absolute; z-index:1999; }

button.close { float:right; margin:5px; cursor:pointer; background-color:#d9534f !important; border-radius:4px !important; color:#fff !important; font-size:21px; font-weight:bold; line-height:1; color:#000000; }
/* ~~~~~~~~~~~~~ Style for the pop box with blackener ends ~~~~~~~~~~~~~~~~~~ */
</style>

<script language="javascript" src="PopBox.js"></script>
<script language="javascript">
var affirm = false; tm_ref=null, cb_func_name=null;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function customConfirm(func,msg)
{
initializePopBox();

popBox.innerHTML = "<table width='100%' cellspacing='0' cellpadding='5' border='0'>" +
"<tr><td>CONFIRM</td>" +
    "<td><button type='button' class='close' style='float:right;margin:5px;' onClick='setUserResponse(false);'>x</button></td></tr>" +
"<tr><td colspan='2'><div class='liner'></div></td></tr>" +
"<tr><td colspan='2'>"+msg+"</td></tr>" +
"<tr align='right'>" +
    "<td><input type='button' name='b_cancel' value='Cancel' onClick='setUserResponse(false);'></td>" +
    "<td><input type='button' name='b_confirm' value='Confirm' onClick='setUserResponse(true);'></td></tr>" +
"</table>";

aWidth = 300; aHeight = 150;
finalizePopBox(50);
cb_func_name = func;                        // Storing the callback function's name globally
tm_ref = setTimeout(func, 30000);           // 60000 milli seconds = 1 minute. 600000 milli seconds = 10 minutes. 900000 milli seconds = 15 minutes
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function handleConfirmResponse()
{
hidePop();
    if( affirm )
    {
    alert("He said Yes");       // Do your work here
    }

    else
    {
    alert("He said No");        // Do nothing
    }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function setUserResponse(respo)
{
affirm = respo;
clearTimeout(tm_ref);
cb_func_name();                 // Gets the function name from global and calls it
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</script>
</head>

<body>
<div id="blackener" class="black"></div>
<div id="popContainer" class="popBoxStyle"></div>                   <!-- NK: The pop-up appears in this div -->

<input type="button" name="b1" value="Delete" onClick="customConfirm(handleConfirmResponse,'Are you sure?');">

</body>
</html>

THE SUPPORTING FILE IS PopBox.js :-

var popBox, popBoxStyl, BlackRef, aWidth, aHeight;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function initializePopBox()
{
popBox = document.getElementById("popContainer");
popBoxStyl = document.getElementById("popContainer").style;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function finalizePopBox(tp)     // Height from page top
{
popBoxStyl.width = aWidth + "px";
popBoxStyl.height = aHeight + "px";
popBoxStyl.left = parseInt(  ( (document.body.clientWidth - aWidth)/2 )  ) + "px";
    if(tp)
    popBoxStyl.top = tp;
    else
    popBoxStyl.top = parseInt(  ( (document.body.clientHeight - aHeight)/2 )  ) + "px";

popBoxStyl.visibility = "visible";          // Nairit: So they are using .style.visibility = . Not .style.display = which I use normally. Learn this way.
blacken();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function blacken()
{
BlackRef = document.getElementById("blackener");

var ht = document.body.scrollHeight;                // document.body.scrollHeight > document.body.offsetHeight > document.body.clientHeight
var wd = document.body.offsetWidth;                 //alert(ht); alert(wd);

BlackRef.style.left = "0px";
BlackRef.style.top = "0px";
BlackRef.style.height = ht + "px";
BlackRef.style.width = wd + "px";

BlackRef.style.backgroundColor = "#000000";
BlackRef.style.opacity = "0.5";
BlackRef.style.filter = 'alpha(opacity=50)';

BlackRef.style.display = "block";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function hidePop()
{
popBoxStyl.visibility = "hidden";

BlackRef.style.backgroundColor = "#ffffff";
BlackRef.style.opacity = "1.0";
BlackRef.style.filter = 'alpha(opacity=100)';

BlackRef.style.display = "none";
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I successfully called the customConfirm() from 2 different places in the same web page. I had to pass 2 different response handler callback function name. Before calling the customConfirm(), I had to make global any variable whose value will be required in the respective callback function. But it is worth the effort ;-)

Upvotes: 1

James
James

Reputation: 4354

No you can't exactly replicate the default confirm/alert/prompt prompts. These block the javascript from running past that line until something is returned, which is not possible to do from javascript.

There are lots of custom modal dialogs out there, and to get around the fact that you can't block the javascript to wait for a response, they instead use callbacks. You pass a function to the call for a dialog window, and this function will then be executed once the dialog window is finished.

Some examples out there are:

http://bootboxjs.com/

http://jqueryui.com/dialog/

A quick google will give you tonnes more. I made one myself before purely from javascript as I didn't want to have css files. It isn't nearly as fully featured as others but it is purely javascript so here's a link: http://heuuuth.com/applications/JamModal.html

Upvotes: 3

Quentin
Quentin

Reputation: 943579

No.

There is no way to create a dialogue in the DOM that will block the JavaScript event loop.

You have to stop whatever you were doing when you displayed it, and then have the options in the dialogue restart the process where you left off.

Upvotes: 1

Related Questions