模式弹出窗口应在弹出窗口保持打开状态

Question

我用后面的代码制作了一个看板。因此，在.cs文件中而不是asp.net文件中。

这是我的前端代码。

        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <div class="modal-overlay"></div>


                <ul class="drag-list" id="kanbanBoardHtml" runat="server"></ul>
            </ContentTemplate>
        </asp:UpdatePanel>

如您所见，我添加了一个updatePanel来防止回发。它可以正常工作，没有回发，但是弹出窗口仍然关闭。

这是复选框代码。

protected void chkPriority_CheckedChanged(object sender, EventArgs e)
{

}

我有想法重新调整javascript代码以重新打开弹出窗口，但是我对javascript不太熟悉，所以我不知道该调用哪种方法。

这是我所有的JavaScript代码。

'use strict';
galPicker();
var originalPosition = null;
var dragEl, nextEl;
var args = [].slice.call(document.getElementsByClassName('dragBox'));
console.log(typeof args);
[].slice.call(document.getElementsByClassName('dragBox')).forEach(function (itemEl) {
    console.log(itemEl);
    itemEl.ondrop = function () {
        drop(this, event);
    };
    itemEl.ondragover = function () {
        allowDrop(this, event);
    };
    [].slice.call(itemEl.children).forEach(function (taskEl) {
        taskEl.draggable = true;

        taskEl.ondragstart = function () {
            drag(this, event);
        };


    });
});

function Validate() {
    return confirm('Save in db?');
}


function insertAfter(elem, refElem) {
    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

function swipeInfo(event) {
    var x = event.clientX,
        y = event.clientY,
        dx, dy;

    dx = (x > originalPosition.x) ? "right" : "left";
    dy = (y > originalPosition.y) ? "down" : "up";
    originalPosition = {
        x: event.clientX,
        y: event.clientY
    };
    return {
        direction: {
            x: dx,
            y: dy
        },
        offset: {
            x: x - originalPosition.x,
            y: originalPosition.y - y
        }
    };
}

function allowDrop(thisTarget, ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = 'move';
    var target = ev.target;
    var info = swipeInfo(ev);
    var superTarget = (target.parentNode).parentNode;





    if (target && superTarget !== dragEl && superTarget.className == 'task') {
        // Сортируем

        // Сортируем
        if (info.direction.y === "down") {
            console.log("-after");
            insertAfter(dragEl, superTarget);
        }
        if (info.direction.y === "up") {
            console.log(" -before");
            thisTarget.insertBefore(dragEl, superTarget);
        }

        //  thisTarget.insertBefore(dragEl, thisTarget.children[0] !== superTarget && superTarget.nextSibling || superTarget);
    }

}

function drag(target, event) {
    dragEl = event.target;
    originalPosition = { // И его первоночальную позицию
        x: event.clientX,
        y: event.clientY
    };
    nextEl = dragEl.nextSibling;
    event.dataTransfer.setData("text", target.id);
}

function drop(target, event) {

    var data = event.dataTransfer.getData("text");
    if (event.target !== dragEl && event.target.className == 'dragBox') {
        target.appendChild(document.getElementById(data));
    }
    event.preventDefault();
}

var thisTask;
function expandCard(thisCard) {
    thisTask = thisCard;
    document.querySelector('.modal-overlay').classList.add('active');
    var cardMini = thisCard.querySelector('.cardMini');
    var cardFull = thisCard.querySelector('.cardFull');
    if (thisCard.className !== 'active') {
        thisCard.classList.add("active");
        cardLoc = cardMini.getBoundingClientRect();
        // cardFull.log(cardLoc.left);
        cardFull.style.left = cardLoc.left + 'px';
        cardFull.style.top = cardLoc.top + 'px';
        cardFull.style.width = cardLoc.width + 'px';
        //cardFull.style.height = cardLoc.height + 'px';
        //     cardFull.style.backgroundColor = '#cccccc';

        //thisCard.classList.add("active");
        setTimeout(function () {
            var w = window.innerWidth
                || document.documentElement.clientWidth
                || document.body.clientWidth;

            var h = window.innerHeight
                || document.documentElement.clientHeight
                || document.body.clientHeight;


            //  console.log(h + ' ' + w);
            cardFull.style.width = w * .6 + 'px';
            //cardFull.style.height = h * .6 + 'px';
            cardFull.style.left = w * .2 + 'px';
            cardFull.style.top = h * .2 + 'px';


        }, 25);

    }
}
var cardLoc;
window.addEventListener('click', function (event) {
    var cardDetail = document.querySelector(".task.active .cardFull");
    var modal = document.querySelector(".modal-overlay");
    //  console.log(cardDetail);

    //   console.log(cardDetail);
    if (event.target == modal) {
        //  var cardLoc = cardDetail.getBoundingClientRect();

        //                // cardDetail.removeAttribute("st/yle");
        cardDetail.style.left = cardLoc.left + 'px';
        cardDetail.style.top = cardLoc.top + 'px';
        cardDetail.style.width = cardLoc.width + 'px';
        cardDetail.style.height = cardLoc.height + 'px';

        setTimeout(function () {
            //
            document.querySelector('.modal-overlay').classList.remove('active');
            document.querySelector(".task.active").classList.remove('active');
            cardDetail.removeAttribute("style");
            //                    cardDetail.classList.remove("cardDetail");

        }, 300);

    }

});


function galPicker() {

    //  "use strict";
    let el;
    let inputEl;
    let colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b", "#00c097", "#FF5E8F"];
    var div = document.body.appendChild(document.createElement("div"));
    div.innerHTML += '<div class="color-picker" id="gal-picker"></div>';
    let picker = document.getElementById('gal-picker');
    let i = 0;
    let text = "";

    /**
     * Usage for Example  <input type="hidden" class="gal-color" value="#9c27b0">
     *
     */
    function glaColorInit() {

        let init = document.querySelectorAll('.gal-color');
        let i = 0;

        while (init[i]) {
            let initColor = init[i].getAttribute('value');
            el = document.createElement("div");
            insertAfter(init[i], el);
            el.classList.add('color-input');
            el.setAttribute('style', 'background-color: ' + initColor + ';');
            i++;
        }
    }

    function insertAfter(referenceNode, newNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    glaColorInit();

    while (colors[i]) {
        text += '<div   class="color item" style="background-color:' + colors[i] + ';"></div>';
        i++;
    }

    document.getElementById('gal-picker').innerHTML = text;

    document.addEventListener('click', pickerOpen, false);

    function pickerOpen(event) {

        let theTarget = event.target || event.srcElement;
        pickerClose(theTarget);

        if (theTarget.className === 'color-input') {
            inputEl = theTarget;
            let callElement = theTarget.getBoundingClientRect();
            picker.classList.add("active");
            let b = callElement.bottom;
            let l = callElement.left;
            picker.style.top = b + 10 + 'px';
            picker.style.left = l + 'px';

        }
        //console.log(inputEl);
        if (inputEl) {
            pickerOnClick(event, inputEl);
        }

    }

    function pickerOnClick(event, theTarget) {
        let target = event.target;
        if (target.className === 'color item') {
            console.log(theTarget);
            theTarget.style.backgroundColor = target.style.backgroundColor;
            theTarget.previousElementSibling.value = target.style.backgroundColor;
            console.log(theTarget.style.backgroundColor);
            console.log(theTarget.closest('.cardFull').firstElementChild.style);
            theTarget.closest('.cardFull').firstElementChild.style.backgroundColor = target.style.backgroundColor;
            console.log(thisTask);
            thisTask.querySelector('.cardMini').firstElementChild.style.backgroundColor = target.style.backgroundColor;
            return;
        }
    }

    function pickerClose(theTarget) {
        if (theTarget.className !== 'color-picker active' && theTarget.className !== 'color-input') {
            picker.classList.remove('active');
            // if use drug and drop need to delete position inside the window in view
            picker.removeAttribute("style");
        }
    }
}

//galPicker();




function showFunction0() {
    var x = document.getElementById("kanbanColumnID0");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection0");
    y.style.display = "none";
}
function hideFunction0() {
    var x = document.getElementById("kanbanColumnID0");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection0");
    y.style.display = "block";
}

function showFunction1() {
    var x = document.getElementById("kanbanColumnID1");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection1");
    y.style.display = "none";
}
function hideFunction1() {
    var x = document.getElementById("kanbanColumnID1");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection1");
    y.style.display = "block";
}

function showFunction2() {
    var x = document.getElementById("kanbanColumnID2");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection2");
    y.style.display = "none";
}
function hideFunction2() {
    var x = document.getElementById("kanbanColumnID2");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection2");
    y.style.display = "block";
}

function showFunction3() {
    var x = document.getElementById("kanbanColumnID3");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection3");
    y.style.display = "none";
}
function hideFunction3() {
    var x = document.getElementById("kanbanColumnID3");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection3");
    y.style.display = "block";
}

function showFunction4() {
    var x = document.getElementById("kanbanColumnID4");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection4");
    y.style.display = "none";
}
function hideFunction4() {
    var x = document.getElementById("kanbanColumnID4");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection4");
    y.style.display = "block";
}


function showFunction5() {
    var x = document.getElementById("kanbanColumnID5");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection5");
    y.style.display = "none";
}
function hideFunction5() {
    var x = document.getElementById("kanbanColumnID5");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection5");
    y.style.display = "block";
}

function showFunction6() {
    var x = document.getElementById("kanbanColumnID6");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection6");
    y.style.display = "none";
}
function hideFunction6() {
    var x = document.getElementById("kanbanColumnID6");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection6");
    y.style.display = "block";
}

function showFunction7() {
    var x = document.getElementById("kanbanColumnID7");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection7");
    y.style.display = "none";
}
function hideFunction7() {
    var x = document.getElementById("kanbanColumnID7");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection7");
    y.style.display = "block";
}

function showFunction8() {
    var x = document.getElementById("kanbanColumnID8");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection8");
    y.style.display = "none";
}
function hideFunction8() {
    var x = document.getElementById("kanbanColumnID8");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection8");
    y.style.display = "block";
}

function showFunction9() {
    var x = document.getElementById("kanbanColumnID9");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection9");
    y.style.display = "none";
}
function hideFunction9() {
    var x = document.getElementById("kanbanColumnID9");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection9");
    y.style.display = "block";
}

function showFunction10() {
    var x = document.getElementById("kanbanColumnID10");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection10");
    y.style.display = "none";
}
function hideFunction10() {
    var x = document.getElementById("kanbanColumnID10");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection10");
    y.style.display = "block";
}

function showFunction11() {
    var x = document.getElementById("kanbanColumnID11");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection11");
    y.style.display = "none";
}
function hideFunction11() {
    var x = document.getElementById("kanbanColumnID11");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection11");
    y.style.display = "block";
}

function showFunction12() {
    var x = document.getElementById("kanbanColumnID12");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection12");
    y.style.display = "none";
}
function hideFunction12() {
    var x = document.getElementById("kanbanColumnID12");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection12");
    y.style.display = "block";
}

function showFunction13() {
    var x = document.getElementById("kanbanColumnID13");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection13");
    y.style.display = "none";
}
function hideFunction13() {
    var x = document.getElementById("kanbanColumnID13");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection13");
    y.style.display = "block";
}

function showFunction14() {
    var x = document.getElementById("kanbanColumnID14");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection14");
    y.style.display = "none";
}
function hideFunction14() {
    var x = document.getElementById("kanbanColumnID14");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection14");
    y.style.display = "block";
}

function showFunction15() {
    var x = document.getElementById("kanbanColumnID15");
    x.style.display = "block";
    var y = document.getElementById("PageContent_collapseSection15");
    y.style.display = "none";
}
function hideFunction15() {
    var x = document.getElementById("kanbanColumnID15");
    x.style.display = "none";
    var y = document.getElementById("PageContent_collapseSection15");
    y.style.display = "block";
}

这也是我的看板的图像以及我想要单击而不关闭弹出窗口的复选框。