Question
· May 2, 2018

Creating a Pop-Up box with with "Yes" and "No" buttons using CSP.

Hello all,

I'm attempting to create a pop-up box with "Yes" and "No" for the buttons. I currently have a JavaScript confirm box but it has "OK" and "Cancel" as the response buttons. I have read that JQuery is a way to do, but is there a possibility of doing this with CSP instead of JQuery?

Thanks

Discussion (2)1
Log in or sign up to continue

You can use the component %ZEN.Dialog.conformationDialog if you have newer version of Cache.

Something like this:

================================================================================

Class ZENTest.ConformationDialog Extends %ZEN.Component.page
{

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen]
{
<page xmlns="http://www.intersystems.com/zen>
<button caption="Delete" onclick="zenPage.showPopupWindow();"/>
</page>
}

ClientMethod showPopupWindow() [ Language = javascript ]
{
zenLaunchPopupWindow('%ZEN.Dialog.confirmationDialog.cls','confirmationDialog','resizable,width=380,height=180');
}

Method %OnAfterCreatePage() As %Status
{
%session.Data("Confirmation","Messages",1)="DELETING!"
%session.Data("Confirmation","Messages",2)="You are about to delete this file!"
%session.Data("Confirmation","Messages",3)="Proceed?"
%session.Data("Confirmation","btnOk",1) = "Yes"
%session.Data("Confirmation","btnCancel",1) = "No"
Quit $$$OK
}

ClientMethod onPopupAction(popupName, action, value) [ Language = javascript ]
{
switch(popupName) {
case 'confirmationDialog':
if (action='OK'){
if (value=true) {
alert('The answer is Yes!');
//do something
}
}
break;
}
}

}
================================================================================

Just call this page from your csp page.

Hi,

this should give you an idea on how to achieve "popups" in HTML. This code is untested but it should give you a start.
First of all you need 2 containers (DIV) at the end of your document:

<div id="backdrop" class="backdrop"></div>

<div id="popup" class="popup">
    <div id="popup_container"></div>
    <button id="popup_btn1"></button>
    <button id="popup_btn2"></button>
</div>


in css you need 4 classes:

.backdrop {
    position: fixed;
    opacity: 0.3;
    background-color: rgb(0,0,0);
    top: 0;
    left: 0;
    width:100%;
    height: 100%
    display: none;
}

.backdrop.active {
    display: block;
}

.popup.active {
    display:block;
}

.popup {
    display:none;
    <!-- add your styling here -->
}

In Javascript you need something like this:

function showConfirm(message, callback) {
    showPopup(message, "Yes", "No", callback);
}

function showPopup(content, button1desc, button2desc, callback) {
    $('#popup').addClass("active");
    $('#backdrop').addClass("active");
    $('#popup_container').html(content);
    $('#popup_btn1').html(button1desc);
    if (button2desc) {
        $('#popup_btn2').html(button2desc).show();
    } else {
        //If we don't get a 2nd description it's a alert-message with one button
        $('#popup_btn2').hide();
    }
    $('#popup_btn1').off().on('click', function() {
        disable(); //First disable our popup
        if (callback) callback(0); //Returns the index of the button clicked
    });

    $('#popup_btn2').off().on('click', function() {
        disable();
        if (callback) callback(1);
    });

    var disable = function() {  
         $('#popup').removeClass("active");
         $('#backdrop').removeClass("active");
         $('#popup_container').html('');
    }
}

//Example of calling the confirm-message

showConfirm("Do you really want to delete?", function(choice) {
    if (choice===0) 
        alert("You pressed yes");
    } else {
        alert("You pressed no");
    }
});

Edit: You can achieve this also by using native-javascript: document.getElementById("popup_container").innerHTML = content; for example