Dailog baseado no bootstarp

Introdução ao bootstrip

O Bootstrap, do Twitter, é atualmente uma estrutura popular de front-end.

O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido. Desenvolvido pelo designer do Twitter Mark Otto e Jacob Thornton, é uma estrutura CSS/HTML.

O Bootstrap fornece especificações elegantes de HTML e CSS, que são escritas menos na linguagem CSS dinâmica. O Bootstrap era popular desde o seu lançamento e tem sido um projeto popular de código aberto no Github, incluindo as últimas notícias da MSNBC da NASA. As estruturas mais familiares para os desenvolvedores móveis domésticos, como a estrutura de código aberto do front-end Wex5, também são baseados no código-fonte do Bootstrap para otimização de desempenho.

1.1. Ajude a documentar palavras -chave

Boostrap Modal Box Oaodailog

1.2. Cenários de uso

Quando um botão é clicado em uma página da Web, o usuário precisa solicitar confirmação e o usuário só pode continuar a executar, ou o usuário clicou no botão Cancelar para cancelar a execução;

Quando você clica para visualizar na página da web e os dados exibidos precisam ser exibidos usando uma caixa pop-up, você pode usar oaodailog

1.3. Diagrama esquemático

Modal com base no boostrap3.0, jQuery1.9

1.4. Instruções para uso

Por que você precisa de Oaodailog?

um. Como o modal fornecido pelo boostrap3.0, um código oculto de divisão modal deve ser definido primeiro na página. O usuário grava o conteúdo a ser exibido na div. Se uma página tiver várias caixas modais, várias caixas modais ocultas dividirem os códigos ocultos, precisam ser gravados, que é sem dúvida redundante.

b. Como o modal padrão não possui um botão de confirmação e cancelamento, é claro que podemos escrever dois botões na div oculta da caixa modal, mas também precisamos escrever JS para monitorar as operações executadas após o clique o botão de confirmação. Ao mesmo tempo, as operações realizadas pelo botão de confirmação estão relacionadas aos dados clicados pelo usuário quando o pop-up. Como os dados são passados, o Bootstrap não nos fornece.

c. O OAODailog versão 1.0.0 resolve principalmente o problema do uso inconveniente de caixas modais de bootstrap e o código redundante.

Imagem de reprodução:

Comece

1. Introduzir Oaodailog.js

Código:

 <script type = "text/javascript" src = "$ {ctx} /static/jquery/jqueryapi/oaodialog/oao.dialog.js" charset = "utf-8"> </sCript>

2. Ligue para o código que exibe a caixa pop-up

Código:

 OAO.Dialog ({Title: "Excluir caixa de prompt", Conteúdo: "Confirme se é realmente excluído, não será restaurado após a exclusão!", OK: function () {oao.dialog.close ();}});

Esta é uma maneira básica e mais comum de usar a caixa pop-up de confirmação.

1.5. API

OAO.Dialog (): Este método é um método para gerar uma caixa pop-up. O parâmetro aprovado é um objeto JSON. Obviamente, você não pode passar nada, e uma caixa pop-up em branco aparecerá, o que não é problema. A seguir, descreve o significado e os valores padrão de cada parâmetro.

• ooo.dialog.close (): feche a caixa modal

1.6. Funções a serem suportadas 1. Atualmente, o conteúdo da caixa pop-up suporta apenas texto e HTML estático e não suporta solicitações de URL.

2. Atualmente, apenas dois botões podem ser exibidos no máximo e os botões personalizados não são suportados.

3. A posição atual e o tamanho da caixa pop-up não suportam a personalização

4. Atualmente, apenas uma caixa pop-up pode aparecer por vez e não suporta aparecer outra caixa modal na caixa pop-up (o modal de bootstrap não é suportado na camada subjacente)

Fique atento, até a próxima versão.

 /*!* OAodialog 1.0.0* Autor: Xufei* Data: 2015-7-9 1: 32* http: //www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. Todos os direitos reservados. Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co., Ltd. ** Isso é licenciado sob o GNU LGPL, versão 2.1 ou mais tarde. function (configurações) {var defaultSettings = {title: "prompt", content: "", okval: "confirmar", cancalval: "cancel", ok: function () {$ ("#oaomodal"). modal ('hide');}, cancel: function () {$ ("#oaom". $ .extend ({}, defaultSettings, configurações || {}); retorna oao.settings;} oao.initContent = function () {var modalhtml = "<div id =/" oaomodal/"class =/" modal Fade delete_modal/"TABINDEX =/"/"1/"/"Modal) aria-labelledby=/"myModalLabel/" aria-hidden=/"true/" >"+" <div class=/"modal-dialog/">"+" <div class=/"modal-content/">"+" <div class=/"modal-header/">"+" <button type=/"button/" class=/"close/" data-dismiss=/"modal/" aria-label =/"Close/"> <span Aria-hidden =/"true/"> × </span> </button> "+" <h4 class =/"modal-title/"> </h4> "+" </div> "+" <div class =/"modal-body/" style/"text-align: center;/"> ">" class =/"modal-footer/"> "+" <botão tipo =/"botão/" class =/"btn btn-default modalcancel/"> </button> "+" <botão =/"button/" class =/"btn btn-primary modalok/"> </button/ $ modelhtml = $ (modelhtml); $ (". Modalok", $ modelhtml) .text (oao.settings.okval); $ (". ModalCancel", $ modelhtml) .text (oao .settings.cancalVal); $ (". Modal-título", $ modelhtml) .text (oao.settings.title); $ (" l) .html (ooo.settings.content); if (! ooo.settings.ok) {$ (". Modalok", $ modelhtml) .remove ();} if (! oao. Settings.cancel) {$ (". ModalCancel", $ modelhtml) .remove ();} $ ("corpo"). Appender ($ modelhtml);} // método Para diálogo pop-up ooo.dialog = function (configurações) {Settings = ooo.init (configurações); oao.initContent (); // Método de chamada $ ('#oaomodal'). {if (oao.settings.close) {oao.settings.close ();} $ ("#oaomodal"). remover ();}) if (ooo.settings.ok) {$ ("#oaomodal .modalok") .modalCancel "). Clique em (Settings.cancel);} $ ("#oaomodal "). function () {$ ("#oaomodal"). modal ('hide');}