-1

如何通过在目标页面上打叉来向以下弹出窗口添加关闭按钮？目前，如果我单击框外的任何位置，它会关闭，但更喜欢框或角落上的十字“X”。

    <script language="javascript">

    $(document).ready(function() {

        //Change these values to style your modal popup
        var align = 'center';                                   //Valid values; left, right, center
        var top = 100;                                          //Use an integer (in pixels)
        var width =700;                                         //Use an integer (in pixels)
        var padding = 10;                                       //Use an integer (in pixels)
        var backgroundColor = '#FFFFFF';                        //Use any hex code
        var source = '../page.php';                                 //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
        var borderColor = '#333333';                            //Use any hex code
        var borderWeight = 4;                                   //Use an integer (in pixels)
        var borderRadius = 5;                                   //Use an integer (in pixels)
        var fadeOutTime = 300;                                  //Use any integer, 0 = no fade
        var disableColor = '#666666';                           //Use any hex code
        var disableOpacity = 40;                                //Valid range 0-100
        var loadingImage = '../images/loading.gif';     //Use relative path from this page

        //This method initialises the modal popup
        $(".modal").click(function() {
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
        });

        //This method hides the popup when the escape key is pressed
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                closePopup(fadeOutTime);
            }
        });

    });

</script>

<script> 

function closePopup(fadeOutTime) {

    fade('outerModalPopupDiv', fadeOutTime);
    document.getElementById('blockModalPopupDiv').style.display='none';

}

function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){

    var containerid = "innerModalPopupDiv";

    var popupDiv = document.createElement('div');
    var popupMessage = document.createElement('div');
    var blockDiv = document.createElement('div');

    popupDiv.setAttribute('id', 'outerModalPopupDiv');
    popupDiv.setAttribute('class', 'outerModalPopupDiv');

    popupMessage.setAttribute('id', 'innerModalPopupDiv');
    popupMessage.setAttribute('class', 'innerModalPopupDiv');

    blockDiv.setAttribute('id', 'blockModalPopupDiv');
    blockDiv.setAttribute('class', 'blockModalPopupDiv');
    blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');

    document.body.appendChild(popupDiv);
    popupDiv.appendChild(popupMessage);
    document.body.appendChild(blockDiv);

    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
     var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
       if(ieversion>6) {
         getScrollHeight(top);
       }
    } else {
      getScrollHeight(top);
    }

    document.getElementById('outerModalPopupDiv').style.display='block';
    document.getElementById('outerModalPopupDiv').style.width = width + 'px';
    document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
    document.getElementById('outerModalPopupDiv').style.background = borderColor;
    document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
    document.getElementById('outerModalPopupDiv').style.position = 'absolute';
    document.getElementById('outerModalPopupDiv').style.zIndex = 100;

    document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
    document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
    document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';

    document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
    document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.background = disableColor;
    document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
    document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
    document.getElementById('blockModalPopupDiv').style.zIndex = 99;
    document.getElementById('blockModalPopupDiv').style.position = 'fixed';
    document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';

    if(align=="center") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    } else if(align=="left") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
    } else if(align=="right") {
        document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
    } else {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    }

    blockPage();

    var page_request = false;
    if (window.XMLHttpRequest) {
        page_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
    } else {
        return false;
    }


    page_request.onreadystatechange=function(){
        if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
            pageloader(page_request, containerid, loadingImage);
        } else {
            imageloader(url, containerid, loadingImage);
        }
    }

    page_request.open('GET', url, true);
    page_request.send(null);

}
</script>

使用此链接打开页面

<a class="modal" href="javascript:void(0);">here</a>
4

2 回答 2

1

在您的源页面中放置一个元素（page.php如您所写的那样）并给它一个唯一的 id 或其他任何东西（例如id="CloseModal"）。在您的脚本中，编写此事件处理程序：

$('body').on('click', '#CloseModal', function () {
    closePopup(fadeOutTime);
});

如果您不想更改源页面，并为所有弹出窗口全局设置关闭按钮，请更改您的modalPopup函数并将以下行添加到其中：

var closeDiv = document.createElement('div');
closeDiv.setAttribute('id', 'CloseModal');
closeDiv.innerHTML = '[CLOSE]';
popupDiv.appendChild(closeDiv);

这些代码会将关闭标签添加到弹出窗口本身。我之前写的 jquery 代码会处理它的点击。

这是您的最终脚本和函数：

<script language="javascript">

    $(document).ready(function() {

        //Change these values to style your modal popup
        var align = 'center';                                   //Valid values; left, right, center
        var top = 100;                                          //Use an integer (in pixels)
        var width =700;                                         //Use an integer (in pixels)
        var padding = 10;                                       //Use an integer (in pixels)
        var backgroundColor = '#FFFFFF';                        //Use any hex code
        var source = '../page.php';                                 //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
        var borderColor = '#333333';                            //Use any hex code
        var borderWeight = 4;                                   //Use an integer (in pixels)
        var borderRadius = 5;                                   //Use an integer (in pixels)
        var fadeOutTime = 300;                                  //Use any integer, 0 = no fade
        var disableColor = '#666666';                           //Use any hex code
        var disableOpacity = 40;                                //Valid range 0-100
        var loadingImage = '../images/loading.gif';     //Use relative path from this page

        //This method initialises the modal popup
        $(".modal").click(function() {
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
        });

        //This method hides the popup when the escape key is pressed
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                closePopup(fadeOutTime);
            }
        });

        // jquery event handler for CloseModal button
        $('body').on('click', '#CloseModal', function () {
            closePopup(fadeOutTime);
        });

    });

</script>

<script> 

function closePopup(fadeOutTime) {

    fade('outerModalPopupDiv', fadeOutTime);
    document.getElementById('blockModalPopupDiv').style.display='none';

}

function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){

    var containerid = "innerModalPopupDiv";

    var popupDiv = document.createElement('div');
    var popupMessage = document.createElement('div');
    var blockDiv = document.createElement('div');

    popupDiv.setAttribute('id', 'outerModalPopupDiv');
    popupDiv.setAttribute('class', 'outerModalPopupDiv');

    popupMessage.setAttribute('id', 'innerModalPopupDiv');
    popupMessage.setAttribute('class', 'innerModalPopupDiv');

    blockDiv.setAttribute('id', 'blockModalPopupDiv');
    blockDiv.setAttribute('class', 'blockModalPopupDiv');
    blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');

    document.body.appendChild(popupDiv);

    // creating the close button and append it to popup
    var closeDiv = document.createElement('div');
    closeDiv.setAttribute('id', 'CloseModal');
    closeDiv.innerHTML = '[CLOSE]';
    popupDiv.appendChild(closeDiv);

    popupDiv.appendChild(popupMessage);
    document.body.appendChild(blockDiv);

    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
     var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
       if(ieversion>6) {
         getScrollHeight(top);
       }
    } else {
      getScrollHeight(top);
    }

    document.getElementById('outerModalPopupDiv').style.display='block';
    document.getElementById('outerModalPopupDiv').style.width = width + 'px';
    document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
    document.getElementById('outerModalPopupDiv').style.background = borderColor;
    document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
    document.getElementById('outerModalPopupDiv').style.position = 'absolute';
    document.getElementById('outerModalPopupDiv').style.zIndex = 100;

    document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
    document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
    document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';

    document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
    document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.background = disableColor;
    document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
    document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
    document.getElementById('blockModalPopupDiv').style.zIndex = 99;
    document.getElementById('blockModalPopupDiv').style.position = 'fixed';
    document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';

    if(align=="center") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    } else if(align=="left") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
    } else if(align=="right") {
        document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
    } else {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    }

    blockPage();

    var page_request = false;
    if (window.XMLHttpRequest) {
        page_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
    } else {
        return false;
    }


    page_request.onreadystatechange=function(){
        if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
            pageloader(page_request, containerid, loadingImage);
        } else {
            imageloader(url, containerid, loadingImage);
        }
    }

    page_request.open('GET', url, true);
    page_request.send(null);

}
</script>
于 2013-05-02T10:26:35.317 回答
0

如果您使用的是 boostrap，则在单击关闭按钮或图像时使用此代码

$("#your-popup-id").modal('hide');

如果您不使用 boostrap 那么这将起作用

$("#your-popup-id").hide();
于 2013-05-02T10:09:19.573 回答