Ao usar a caixa de diálogo Modal do Bootstrap, você precisa escrever a caixa de diálogo HTML na página. Se houver muitos lugares em uma página que requer uma caixa de diálogo, isso significa que você precisa escrever vários, o que parece muito problemático. Não estou acostumado com o método da caixa de diálogo modal de bootstrap, por isso fiz um encapsulamento e expansão simples, adicionei um título personalizado, largura e altura e exibi no centro de acordo com a largura e a altura.
Propriedades padrão:
ID: "Modal", // Pop-up ID
Título: "Diálogo", // Título pop-up
Largura: "600", // Largura da janela popt, % não é suportado por enquanto
Altura: "500", // altura popular da janela, não suporta %
pano de fundo: true, // se a oclusão é exibida, é o mesmo que a caixa modal de bootstrap nativa
Teclado: True, // Se deve ativar a tecla ESC para sair, é a mesma que a caixa modal de bootstrap nativa
remoto: "", // Carregar URL remoto, assim como a caixa modal de bootstrap nativa
OpenEvent: NULL, // Função de retorno de chamada após a abertura da janela pop-up
CloseEvent: NULL, // Função de retorno de chamada depois que a janela pop-up é fechada
OKEVENT: NULL // Clique no botão OK para função de retorno de chamada
Como usar:
1. Defina através do atributo html-*
Copie o código da seguinte forma: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-okevent = "ok ()"> pop-up de demonstração </a>
2. Inicialize através de JS
$ (". mzdialog"). mzdialog ();
Lugares e bugs inadequados, aqui está apenas uma referência para aprender e você pode modificá -los e melhorá -los
1. O plug-in Bootstrap-Mzdialog possui apenas 2 botões no momento. Cancelar e confirmar, e os botões personalizados ainda não foram suportados. Você pode modificar o código -fonte e adicionar esta função.
2. Você só pode usar o método HTML Data-* para defini-lo. Você não suporta parâmetros de configuração durante a inicialização do JS. Você pode modificar o código -fonte e estender essa função por você mesmo.
3. Peso e altura não devem ser usados.
4. Observe que a função de retorno de chamada aqui deve estar em um formato de string, como okevent: "ok ()". Aqui, a função definida pela própria função OK, lembre -se de incluir ();
JS Código fonte:
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- backdrop:true,//Whether the occlusion is displayed, the same as the native bootstrap modal box keyboard:true,//Whether the esc key is enabled to exit, the same as the native bootstrap modal box remote:"",//Load the remote url, the same as the native bootstrap modal box openEvent:null,//Calling the callback function closeEvent:null,//Calling the pop-up function OKEVENT: NULL // Clique no botão OK para função de retorno de chamada}; // Janela de criação dinâmica var criativeialog = {init: function (opts) {var _self = this; // janela de inserção dinâmica var d = _self.dhtml (opts); $ ("corpo"). Appender (d); var modal = $ ("#"+opts.id); // inicialize a janela modal.modal (OPTS); // Posição do tamanho da janela var h = modal.Height ()-modal.find (". Modal-header"). OuterHeight ()-modal.find (". modal.css ({'margin-left': opts.width/2*-1, 'margin-top': opts.Height/2*-1, 'top': '50%'}). Find (". modal // Mostrar window.modal ('show') // Exclua a janela depois de esconder a janela html .on ('hidden', function () {modal.remove (); $ (". Modal-backdrop"). Remons (); if (opts.close) {avaliou (avali.closeEvent); if (opts.openevent) {avaliar (opts.openevent); }, dhtml: function (o) {return '<div id = "'+o.id+'" role = "diálogo" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <butão tipo = "Button" Data-dismiss = "modal" aria-hidden = "true"> × id = "mymodallabel"> '+o.title+' </h3> </div> <div> <p> carregando ... </p> </div> <div> <button data-Dismiss = "modal" aria-hidden = "true"> cancel </button> </button> </button> </div> <//Div>; }}; Retorne this.Each (function () {$ (this) .Click (function () {var opts = $ .extend ({}, padrão, {id: $ (this) .attr ("Data-id"), title: $ ("DataTr (" Data-mtitle "), largura: $ (this) .attr (" cenário: $ (this) .attr ("data-backdrop"), teclado: $ (this) .attr ("data-teclado"), remoto: $ (this) .attr ("dados-rememo"), openEvent: $ (this) .attr ("Data-openevent"), próximo): $ ($). okevent: $ (this) .Attr ("Data-okevent")}); }; }) (jQuery);O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.