Dailog based on BootStarp

Introduction to BootStrip

Bootstrap, from Twitter, is currently a popular front-end framework.

Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. Developed by Twitter designer Mark Otto and Jacob Thornton, it is a CSS/HTML framework.

Bootstrap provides elegant HTML and CSS specifications, which are written in the dynamic CSS language Less. Bootstrap was popular since its launch and has been a popular open source project on GitHub, including NASA's MSNBC's Breaking News. Frameworks that are more familiar to domestic mobile developers, such as the WeX5 front-end open source framework, are also based on the Bootstrap source code for performance optimization.

1.1. Help Document Keywords

boostrap modal box oaoDailog

1.2. Usage scenarios

When a button is clicked on a web page, the user needs to prompt confirmation, and the user can only continue to execute, or the user clicked the cancel button to cancel the execution;

When you click to view on the web page and the displayed data needs to be displayed using a pop-up box, you can use oaoDailog

1.3. Schematic diagram

Modal based on boostrap3.0, jquery1.9

1.4. Instructions for use

Why do you need oaoDailog?

a. Since the modal provided by boostrap3.0, a modal div hidden code must be defined on the page first. The user writes the content to be displayed into the div. If a page has multiple modal boxes, multiple hidden modal boxes div hidden codes need to be written, which is undoubtedly redundant.

b. Since the default modal does not have a confirmation and cancel button, of course we can write two buttons in the hidden div of the modal box, but we also need to write js to monitor the operations performed after the confirmation button is clicked. At the same time, the operations performed by the confirmation button are related to the data clicked by the user when the pop-up. How the data is passed, bootstrap does not provide us with.

c. The oaoDailog version 1.0.0 mainly solves the problem of inconvenient use of modal boxes of bootstrap and the redundant code.

Reproduction image:

Get started

1. Introduce oaoDailog.js

Code:

 <script type="text/javascript" src="${ctx}/static/jquery/jqueryApi/oaoDialog/oao.dialog.js" charset="UTF-8"></script>

2. Call the code that displays the pop-up box

Code:

 oao.dialog({title:"Delete prompt box", content: "Please confirm whether it is really deleted, it will not be restored after deletion!", ok:function(){oao.dialog.close();}});

This is a basic and most common way to use the confirmation pop-up box.

1.5. API

oao.dialog(): This method is a method to generate a pop-up box. The passed parameter is a json object. Of course, you can pass nothing, and a blank pop-up box will pop up, which is no problem. The following describes the meaning and default values ​​of each parameter.

•oao.dialog.close(): Close the modal box

1.6. Functions to be supported 1. Currently, the content of the pop-up box only supports text and static html, and does not support url requests.

2. Currently, only two buttons can be displayed at most, and custom buttons are not supported.

3. The current position and size of the pop-up box do not support customization

4. Currently, only one pop-up box can pop up at a time, and it does not support popping up another modal box in the pop-up box (bootstrap modal is not supported in the underlying layer)

Stay tuned, see you in the next version.

 /*!* oaoDialog 1.0.0* author:xufei* Date: 2015-7-9 1:32* http://www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. All Rights Reserved. Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co., Ltd.** This is licensed under the GNU LGPL, version 2.1 or later.* For details, see: http://creativecommons.org/licenses/LGPL/2.1/*///oao namespace oao = {};oao.init = function(settings){var defaultSettings ={title : "Prompt",content:"",okVal:"confirm",cancalVal:"Cancel",ok:function(){$("#oaoModal").modal('hide');},cancel:function(){$("#oaoModal").modal('hide');},close:false}oao.settings = $.extend({}, defaultSettings, settings || {});return oao.settings;}oao.initContent = function(){var modelHtml = "<div id=/"oaoModal/" class=/"modal fade delete_modal/" tabindex=/"-1/" role=/"dialog/" 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;/">"+" </div>"+" <div class=/"modal-footer/">"+" <button type=/"button/" class=/"btn btn-default modalCancel/"></button>"+" <button type=/"button/" class=/"btn btn-primary modalOK/"></button>"+" </div>"+" </div>"+" </div>"+" </div>";var $modelHtml = $(modelHtml);$(".modalOK",$modelHtml).text(oao.settings.okVal);$(".modalCancel",$modelHtml).text(oao.settings.cancalVal);$(".modal-title",$modelHtml).text(oao.settings.title);$(".modal-body",$modelHtm l).html(oao.settings.content);if(!oao.settings.ok){$(".modalOK",$modelHtml).remove();}if(!oao.settings.cancel){$(".modalCancel",$modelHtml).remove();}$("body").append($modelHtml);}//Method for pop-up dialog oao.dialog = function(settings){settings = oao.init(settings);oao.initContent();//Call method $('#oaoModal').on('hidden.bs.modal', function (e) {if(oao.settings.close){oao.settings.close();}$("#oaoModal").remove();})if(oao.settings.ok){$("#oaoModal .modalOK").click(settings.ok);}if(oao.settings.cancel){$("#oaoModal .modalCancel").click(settings.cancel);}$("#oaoModal").modal('show').css({"margin-top": function () {return ($(this).height() / 2-200);}});;}// Method to close the dialog oao.dialog.close = function(){$("#oaoModal").modal('hide');}