Blokowanie treści tła i fokus na modalnym oknie dialogowym

Question

Próbuję zablokować tło za pomocą moich dwóch dialogów modalnych jquery, dopóki użytkownik nie zamknie okna. Masz pomysł, jak to osiągnąć?

Przez "blokowanie tła" rozumiem wyłączenie innych elementów na stronie (tj. Uniemożliwianie innych elementów).

Oto mój kod poniżej:

  // 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

Czy tego szukasz

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

Czyni zablokować tło masz przycisk View Source. Czy masz w ogóle jakąś nakładkę?

Spróbuj ustawić go ręcznie (nie zalecane, ale raczej koryta css):

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

I oczywiście zachodzącego modalne opcję true.

Jeśli kolor jest zbyt duży, zmniejsz odpowiednio nieprzezroczystość.

Answer 2

Przejrzyj opcje dialogowe w interfejsie API, jest ich sporo. Oprócz modal, która ustawia nakładkę na stronie blokującej zdarzenia myszy, istnieje również closeOnEscape, która, jeśli jest ustawiona na false, nie pozwala użytkownikowi na naciśnięcie klawisza Escape na klawiaturze w celu zamknięcia okna i dlatego musi bezpośrednio współpracować z formantami w oknie dialogowym.

istnieje znacząca API schowany w zakładkach na stronie demo http://jqueryui.com/demos/dialog/

Answer 3

kiedy zmienił wartość modalna na „true” (w kanciastych js) wszystkie elementy tła dostał disabled.here jest mój kod dołączony:

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

Spróbuj stworzyć swój własny motyw za pomocą rolki motywu JQuery. Pomaga również w funkcjonalności modal i inne wzory wewnątrz biblioteki jQuery UI