Blockieren von Hintergrundinhalten und Fokus auf modalen Dialog

Question

Ich versuche, den Hintergrund mit meinen zwei jquery modalen Dialogen zu blockieren, bis der Benutzer das Fenster schließt. Irgendeine Idee, wie man das erreicht?

Indem ich den Hintergrund blockiere, meine ich die Deaktivierung der anderen Elemente auf der Seite (d. H. Andere Elemente nicht anklickbar machen).

Hier ist mein Code unten:

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

Ist das, was Sie suchen den Hintergrund Sie die Ansicht Quellentaste haben

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

Es tut blockieren. Hast du irgendeine Überlagerung?

Probieren Sie es manuell (nicht empfohlen, sondern Trog css) Einstellung:

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

Und natürlich die modale Option auf true setzen.

Wenn die Farbe zu stark ist, verringern Sie die Opazität entsprechend.

Answer 2

Schauen Sie sich die Dialogoptionen in der API an, es gibt einige. Neben modal, die blockiert Mausereignisse ein Overlay über Seite setzt, gibt es auch closeOnEscape, die gesetzt, wenn auf false Benutzer nicht zulässt, dass Escape-Taste auf der Tastatur schlagen Dialog zu schließen und damit mit Dialogelementen direkt zu interagieren hat

Es wird eine signifikante API in die Registerkarten auf Demo-Seite versteckt http://jqueryui.com/demos/dialog/

Answer 3

wenn ich modalen Wert auf ‚true‘ geändert (in Winkel js) Alle bekamen Hintergrundelemente disabled.here ist mein Code angehängt:

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

Versuchen Sie, mit Jquery's Motivroller Ihr eigenes Thema zu erstellen. Es hilft auch bei der Funktionalität des modal und andere Widgets innerhalb JQuery UI-Bibliothek