.JS晚餐|黑色屏幕和增強元素，屏幕效果

我想製作一個屏幕效果，就像按下按鈕時，對話框將出現在中央，其餘空間將變得更暗並且不透明。.JS晚餐|黑色屏幕和增強元素，屏幕效果

一個例子就像Boostrap的Modal當你點擊它的butoon。

http://twitter.github.com/bootstrap/javascript.html

我的理解是要表明，我們可以簡單地使用.dialog或元素（）等，畫面效果應該是（）或.dialog的內部使用其他功能等

我想知道，他們如何或用什麼功能來實現這個特定的屏幕效果？我會明白，我將有一個腳本示例。非常感謝你。

來源

2012-12-27 Till

基本上，這是通過在所有當前屏幕元素上重疊div並將其背景設置爲黑色並將其不透明度設置爲50％-75％來完成的。最重要的是，集中另一個有你的「模態」內容的div。

我會建議使用像KendoUI，ExtJS的，jQueryUI的，等出庫，但他們都將做類似下面的快速和骯髒的東西演示：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script> 
     $(function() { 
      $('#button').click(function() { 
       var blackOverlay = $('<div/>') 
        .attr('id', 'overlay') 
        .css({ 
         'position': 'absolute', 
         'width': '100%', 
         'height': '100%', 
         'background-color': 'black', 
         'top': 0, 
         'left': 0, 
         'z-index': 1001, 
         'opacity': .75 
        }); 

       var modalContent = $('<div/>') 
        .css({ 
         'z-index': 1002, 
         'background-color': 'white', 
         'display': 'inline-block', 
         'width': 300, 
         'height': 150, 
         'margin-left': 400, 
         'margin-top': 400 
        }) 
        .html('This is the modal content.<br/>'); 

       var okayButton = $('<input/>') 
        .attr('type', 'button') 
        .attr('value', 'OK') 
        .click(function() { 
         blackOverlay.remove(); 
        }); 

       modalContent.append(okayButton); 

       blackOverlay.append(modalContent); 

       $('body').append(blackOverlay); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    Here is some content.<br /> 
    <input id="button" type="button" value="Click Me" /> 
</body> 
</html>

來源

2012-12-27 01:48:07 Dan

非常感謝您！ – Till

.JS晚餐|黑色屏幕和增強元素，屏幕效果

回答

相關問題