Blocco del contenuto dello sfondo e messa a fuoco sulla finestra di dialogo modale

Question

Sto provando a bloccare lo sfondo con i miei due dialoghi modali jquery finché l'utente non chiude la finestra. Qualche idea su come ottenere questo?

Con "blocco dello sfondo" intendo disabilitare gli altri elementi sulla pagina (ovvero rendere gli altri elementi non modificabili).

Ecco il mio codice qui sotto:

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

E 'questo quello che stai cercando per

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

Lo fa bloccare sullo sfondo si ha il pulsante di vista di origine. Hai qualche overlay?

Provare a impostare manualmente (non raccomandato, ma piuttosto attraverso css):

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

E, impostando l'opzione modale a true corso.

Se il colore è troppo forte diminuire di conseguenza l'opacità.

Answer 2

Guardare attraverso le opzioni di dialogo nell'API, ce ne sono alcune. Oltre a modal che stabilisce un overlay sopra pagina che gli eventi del mouse blocchi, c'è anche closeOnEscape che, se impostato su false non permette all'utente di colpire tasto Esc sulla tastiera per chiudere la finestra e quindi deve interagire con i controlli di dialogo direttamente

C'è un'API significativo nascosto nelle linguette a pagina dimostrativa http://jqueryui.com/demos/dialog/

Answer 3

quando ho cambiato valore modale a 'vero' (in js angolari) tutti gli elementi di sfondo ottenuto disabled.here è il mio codice allegato:

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

Prova a creare il tuo tema utilizzando il rullo tema di Jquery. Aiuta anche nella funzionalità del modale e altri widget all'interno biblioteca UI Jquery