1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Colocar CSS de aviso de blockUI em arquivo externo

Tenho o seguinte código feito com blockUI (jQuery):

$(document).ready(function() {   
    $('#submitForm').click(function() {                       
        $.blockUI({ message: '<h1><br/><img src="http://site/imagens/busy.gif" /> Aguarde, estamos processando sua requisição...  </h1><br/>',css: { border: '3px solid #a00' }  });   
        submeter();   
    });                   
});    

Eu queria tirar a parte

css: { border: '3px solid #a00' } 

e colocar num CSS externo, para centralizar o código. Como fazer? Tem que criar um class no CSS? Como ele ficaria?

Não funcionou desse jeito:

$(document).ready(function() {   
    $('#submitForm').click(function() {                       
        $.blockUI({ 
            message: '<h1><br/><img src="http://site/imagens/busy.gif" /> Aguarde, estamos processando sua requisição...  </h1><br/>',
            onBlock: function(){
                $(".blockPage").addClass("minhaClasse");
            }
        });   
        submeter();   
    });                   
});

coloquei no css assim:

.minhaClasse{
        padding:        0, 
        margin:         0, 
        width:          30%, 
        top:            40%, 
        left:           35%, 
        textAlign:      center, 
        color:          #000, 
        border:         3px solid #aaa, 
        backgroundColor:#fff, 
        cursor:         wait 

}

A tela fica com fundo escuro, mas a janela de mensagem não é mostrada...o que pode ser?

========================================

A solução encontrada foi:

javascript:

        $.blockUI.defaults.css = {}; 


        $(document).ready(function() {   
            $('#submitForm').click(function() {                       
                $.blockUI({ 
                    message: $('#domMessage')


                });   
                submeter();   
            });                   
        });

jsp:

<%=Messages.MENSAGEM_ESPERA %>

CSS:

div.blockMsg {
    width:  40%;
    top:    30%;
    left:   30%;
    text-align: center;
    background-color: #fff;
    border: 3px solid #a00;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
    -moz-opacity:.70;
    opacity:.70;
    padding: 15px;
    color: #000;
}
  • @Roger75, se alguma das respostas apresentadas solucionou a sua dúvida, não esqueça de marcá-la como correta.

    Felipe   05 de abr de 2013
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

3 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags css jquery ou faça a sua própria pergunta.