阻止背景內容，並專注於模態對話框

Question

我想阻止與我的兩個jquery模式對話框的背景，直到用戶關閉窗口。任何想法如何實現這一目標？通過「阻止背景」我的意思是禁用頁面上的其他元素（即使其他元素不可點擊）。

這裏是我下面的代碼：

  // sign up dialog 
     $("#aboutus_dialog").dialog({ 
      autoOpen: false, 
      show: "fadein", 
      hide: "fadeout" 
     }); 

     // sign up dialog 
     $("#signup_dialog").dialog({ 
      autoOpen: false, 
      show: "fadein", 
      hide: "fadeout" 
     });  

     // about us modal 
     $('#aboutus').click(function() { 
      modal: true, 
      $("#aboutus_dialog").dialog("open"); 
      return false; 
     }); 

     // about us modal 
     $('#signup').click(function() { 
      $("#signup_dialog").dialog("open"); 
      return false; 
     }); 
    }); 

Answer 1

這是你在找什麼

http://jqueryui.com/demos/dialog/#modal

它確實阻止你查看源代碼按鈕的背景。你有沒有覆蓋？

嘗試手動設置它（不推薦，而是槽CSS）：

$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;'); 

課程設置模式選項設置爲true和。

如果顏色太濃，則相應地減少不透明度。

Answer 2

查看API中的對話框選項，其中有很多。除了modal其在頁面設置一個覆蓋阻止鼠標事件，也有closeOnEscape如果將它設置到false不允許用戶打鍵盤上的ESC鍵，關閉對話框，並因此具有直接對話框控件

互動

還有塞進標籤演示頁 http://jqueryui.com/demos/dialog/

Answer 3

當我改變了模態值爲「真」（在角JS）所有背景元素得到disabled.here上顯著API是我的代碼附：

var options = { 
        autoOpen : false, 
        modal : true, 
        close : function(event, ui) { 
         console.log("Predefined close"); 
        } 
       }; 

    dialogService.open("myDialog" + k, "dialogTemplateload.html", model, options) 
    .then(
      function(result) { 
       console.log("Close"); 
       console.log(result); 
      }, 
      function(error) { 
       console.log("Cancelled"); 
      } 
     ); 

Answer 4

嘗試使用jquery的主題滾筒創建自己的主題。它還有助於模態及其他工具的功能，jQuery的UI庫