添加關閉按鈕以彈出

-2

如何通過在目標頁面上放置十字來將關閉按鈕添加到以下彈出窗口？目前它會關閉，如果我點擊框外的任何地方，但會更喜歡框或角落上的十字「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>

來源

2013-05-02 Steve

你在這裏展示的代碼似乎並不相關，以錯誤粘貼的問題 – Corneliu 2013-05-02 10:05:28

對不起錯誤代碼，請參閱更新的代碼 - 有誰標誌着我請檢查它是一個錯誤謝謝 – Steve 2013-05-02 10:17:33

函數'modalPopup'的定義在哪裏？ – 2013-05-02 10:22:18

在您的源頁面中放入一個元素（此處爲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);

這些代碼會將close標籤添加到彈出窗口本身。我以前寫的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-02 10:26:35

嗨Mojtaba，我仍然不明白我必須放在page.php頁面，因此在母版頁上進行調整。感謝您的幫助。 – Steve 2013-05-02 10:31:03

因爲我不知道'modalPopup'函數做了什麼，所以我提供了這個解決方案。如果您編寫了該函數的定義，我可以幫助您併爲您提供一個無需更改源頁面的解決方案。 – 2013-05-02 10:36:50

好吧，我已經添加了上面的JavaScript「modalPopup」功能和「closePopup」功能，可以幫助你。 – Steve 2013-05-02 10:43:21

如果您正在使用的自舉，然後使用onclick這個代碼關閉按鈕或圖像

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

，如果你不使用自舉的那麼這個打開將工作

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

來源

2013-05-02 10:09:19

你有沒有正確的讀過這個問題？ – 2013-05-02 10:13:54

添加關閉按鈕以彈出

回答

相關問題