Demo with bootstrap pop-up effect

Introduction: For Web developers, the use of pop-up boxes and prompts will certainly not be unfamiliar, such as the common form of new and editing functions, generally the main two types of processing: in-line editing and pop-up box editing. In addition to the user experience, pop-up boxes and cue boxes play an important role, if your system has a friendly pop-up prompt box, it will naturally give users a good page experience. The previous chapters introduce several commonly used components of bootstrap, this chapter looks at the bootstrap inside the popup box and the Prompt box processing. In general, pop-up tips are divided into three main types: popup box, OK cancellation prompt box, information prompt box . This article combines these three types to introduce their use.

First, bootstrap popup box
Using the jquery UI, you should know that there is a dialog popup widget that is also rich in functionality. Similar to the dialog of the jquery UI, the bootstrap contains a popup box component. Open the bootstrap document can see its dialog is directly embedded in Bootstrap.js and bootstrap.css inside, that is, as long as we introduced the bootstrap file, you can directly use its dialog components, is not very convenient. This article introduces the use of the next bootstrap dialog in conjunction with the new editing features. Don't say much nonsense, just how it's used.

1. Cshtml Interface Code

<div class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" > <div class= " Modal-dialog "role=" document "> <div class=" modal-content "> <div class=" Modal-header "> <button t Ype= "button" class= "Close" data-dismiss= "modal" aria-label= "close" ><span aria-hidden= "true" >x</span ></button> 
The outermost div defines the hidden dialog. Let's focus on the second level Div.
<div class= "Modal-dialog" role= "Document" >
This div defines the dialog, the corresponding class has three sizes of pop-up boxes, as follows:
<div class= "Modal-dialog" role= "document" ><div class= "Modal-dialog modal-lg" role= "Document" ><div class= "Modal-dialog modal-full" role= "Document" >
The first is a pop-up box that represents the default type, the second represents an enlarged pop-up box, and the third represents a full-screen pop-up box. Role= "Document" represents the current document of the Popup object.
2, JS inside will dialog show out.
By default, our pop-up boxes are hidden and show only when the user clicks on an action. Take a look at JS inside how to deal with it:
Registers the event $ ("#btn_add") for the New button. Click (function () {  $ ("#myModalLabel"). Text ("new");  $ (' #myModal '). Modal (); });
Yes, you're right, you just need this to show the dialog.
$ (' #myModal '). Modal ();
Excerpt online article address: http://www.jb51.net/article/76013.htm
Demo with bootstrap pop-up effect