Usa CSS esterno invece di CSS in linea per blockUI

Question

Sto utilizzando blockUI in più posizioni e hanno tutte le stesse proprietà, quindi continuo a ripetere gli stessi valori CSS in tutto il posto che utilizzo. c'è un modo per inserirlo in un file CSS.

Attualmente io uso:

$.blockUI({ 
     message: $('#Something'), 
     css: { 
      border: '5px solid #F4712', 
      backgroundColor: '#6F4712', 
      width: '300px' 
     } 
    }); 

posso usare come:

$.blockUI({ 
    message: $('#Something'), 
     css: { 
      class:"alertBox" 
     } 
    }); 

grazie

Answer 1

secondo il documentation - non si può.

ma di farlo:

the class $(".blockPage").addClass("myClass") 

P.S. assicurati di non dare alcun codice nel codice come hai scritto tu.

e aggiornamento per qualcosa di simile:

$.blockUI({ 
      fadeIn: 1000, 
      timeout: 2000, 
      onBlock: function() { 
       $(".blockPage").addClass("myClass"); 

      } 
     }); 

Answer 2

È possibile definire uno stile per la finestra di messaggio di fuori del javascript e omettere il blocco css. Nel tuo caso potrebbe essere:

<style type="text/css"> 
div.blockMsg { 
    border: '5px solid #F4712'; 
    backgroundColor: '#6F4712'; 
    width: '300px'; 
} 
</style> 

Look at this (v2) per ulteriori informazioni.

Answer 3

Per la classe dinamica aggiungendo la prima risposta, ma si è verificato qualche sfarfallio, perché la classe è stata aggiunta troppo tardi. Così ho aggiunto la mia classe personalizzata prima della blockUI al corpo e ha cambiato la mia css un po 'e per me funziona benissimo:

JS:

$('body').removeClass().addClass('myCustomClass'); 
$.blockUI(); 

CSS:

div.blockPage{// default layout 
width: 30%; 
top: 40%; 
left: 35%; 
text-align:center; 
} 

body.myCustomClass > div.blockPage{ 
width: 90%; 
left: 5%; 
top: 3%; 
text-align:left; 
} 

Answer 4

lo so questa è una vecchia domanda ma ora puoi usare $.blockUI.defaults.css = {}; come indicato nello documentation

Answer 5

Ero a metà strada attraverso la modifica del mio poliziotto y del plug-in blockUI per aggiungere questa funzionalità e ho trovato che esisteva già un'opzione di configurazione per blockMsgClass, impostandola sulla classe css aggiunge la classe al blocco.

$.blockUI(
{ 
    blockMsgClass: 'alertBox', 
    message: 'Hello styled popup' 
}); 

Una cosa da notare è però che il codice del plugin utilizza CSS in linea, quindi è necessario contrassegnare come importante per i campi come text-align, di colore, di confine, background-color ed il cursore: attendere.

.alertBox 
{ 
    border:none !important; 
    background-color: #437DD4 !important; 
    color: #fff !important; 
    cursor: default !important; 
} 

Answer 6

questa forse una vecchia questione, ma qui è la risposta per chi ne ha bisogno http://malsup.com/jquery/block/stylesheet.html fondamentalmente si disattivare il CSS di default da questa linea
$ .blockUI.defaults.css = {};

e quindi aggiungere lo stile css all'interno di un file separato o così.