[Original] Bootstrap-based Modal secondary encapsulation and bootstrapmodal secondary Encapsulation

[Original] Bootstrap-based Modal secondary encapsulation and bootstrapmodal secondary Encapsulation
Preface

Bootstrap: an open-source front-end development toolkit launched by Twitter. It was developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework.

Http://www.bootcss.com/

1. Bootstrap Modals (modal box) basic usage

Use the prefix of bootstrapto apply jquery.jsand bootstrap.jsto and bootstrap.css. Note: The latest bootstrap version must be used with jquery1.9 or later.

<! -- Button trigger modal box --> <button class = "btn-primary btn-lg" data-toggle = "modal" data-target = "# myModal"> start to demonstrate the modal box </button> <div class = "modal fade" id = "myModal" 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-hidden = "true"> & times; </button> 

Modal is triggered when we click the button, as shown in figure
2.0 first look at our encapsulation code
$ (Function () {if ($. fn. modal) {$. fn. modal. defaults. spinner = $. fn. modalmanager. defaults. spinner = '<div class = "loading-spinner">' + '<div class = "progress-striped active">' + '<div class = "progress-bar"> '+' </div> '; $. fn. modalmanager. defaults. resize = true;} window. modal = function () {var _ tplHtml = '<div class = "modal created-modal" id = "[Id]">' + '<div class = "modal-header"> '+' <Button type = "button" class = "close" data-dismiss = "modal"> <span aria-hidden = "true"> × </span> <span class = "sr-only"> Close </span> </button> '+' 
3.0 next let's look at our case code
@ {Layout = null;} // The files introduced here must follow the sequence <script src = "~ /Scripts/jquery-1.8.2.min.js "> </script> <script src = "~ /Scripts/bootstrap/js/bootstrap. min. js "> </script> <script src = "~ /Scripts/bootstrap-modal/js/bootstrap-modal.js "> </script> <script src = "~ /Scripts/bootstrap-modal/js/bootstrap-modalmanager.js "> </script> <script src = "~ /Scripts/feng_modal.js "> </script> <link href = "~ /Scripts/bootstrap/css/bootstrap.min.css "rel =" stylesheet "/> <link href = "~ /Scripts/bootstrap-modal/css/bootstrap-modal.css "rel =" stylesheet "/> <link href = "~ /Scripts/bootstrap-modal/css/bootstrap-modal-bs3patch.css "rel =" stylesheet "/> <! DOCTYPE html> 4.0 view our results



 
If you feel good after reading this article, click 【Follow] To support the blogger. Thank you!
If you feel good after reading this article, click
[Recommended] 

Author:Feng Xiaoyi
QQ: 616931
Source:Http://www.cnblogs.com/fenglingyi
Statement:The copyright of this article is shared by the author and the blog Park. This statement must be retained without the author's consent and the original article connection must be clearly provided on the article page. Otherwise, the legal liability will be retained.