Добавить кнопку закрытия для всплывающего окна

-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

Sorry неправильный код вставили по ошибке, пожалуйста, см обновленный код - Кто никогда не отметил меня вниз, пожалуйста, просмотрите, это была ошибка. Спасибо – Steve

Где определение функции 'modalPopup'? – 2013-05-02 10:22:18

Поместите элемент на свою исходную страницу (здесь page.php, как вы писали), и дадите ему уникальный идентификатор или что-нибудь еще (например, 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

Hi Mojtaba, я до сих пор не понимаю, что должен внести на страницу page.php и, следовательно, отрегулировать главную страницу. Цените свою помощь по этому поводу. – Steve

Поскольку я не знаю, что делает функция modalPopup, я предложил это решение. Если вы написали определение функции, я могу помочь вам и дать вам решение, которое не требует изменения исходной страницы. – 2013-05-02 10:36:50

Хорошо, я добавил функцию javascript «modalPopup» выше и функцию closePopup, которая может вам помочь. – Steve

Если вы используете boostrap затем использовать этот код OnClick близкой кнопки или изображений

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

, и если вы не используете boostrap, то это будет работать

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

источник

2013-05-02 10:09:19

вы правильно прочитали вопрос ??? –

Добавить кнопку закрытия для всплывающего окна

ответ

Смежные вопросы