Bootstrap to write a dialog box that pops up on the current web page _javascript tips for non-pop-up windows

Using the Pinball window to display the text messages in the Web page is fine, though not so friendly. However, the window has nothing to do with the long message of a website's terms of service. This is something that needs to be modal with a modal box and embeds a multiline text box inside the modal box textarea.
This thing, if you want to write JavaScript code manually is too difficult to do, but the use of bootstrap to write is simple.

I. BASIC OBJECTIVES

There is a Web page, which has a hyperlink, a button:

Click on them to open a modal box as shown below, the modal box, click on the top right corner of the X button and the bottom of the confirmation will be closed.

Second, the production process

1. Because of the need to use bootstrap, so first in the official website (click to open the link) to download components can be used in the production environment of the bootstrap version (click to open the link), BOOTSTRAP3 is not compatible with 2, it is recommended to use BOOTSTRAP3 directly according to its development documents. This article is also based on BOOTSTRAP3 production. While The JavaScript effect provided by BOOTSTRAP3 needs to be supported by jQuery1.11 (click on the Open link) to download the jQuery1.11 of the old browser IE6 (click on the Open link) on the jquery website instead of the IE6 of the old browser JQuery2. After downloading, configure the site directory. The BOOTSTRAP3 directly to the site directory, and put the jquery-1.11.1.js into the JS directory, that is, bootstrap.js the same directory, the structure of the site folder is roughly as follows:

2. This page is encoded as follows, a fragment of the following fragment is analyzed:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

(1)

(2) The links and buttons originally rendered on the Web page

 <p>
  <!--data-toggle= "modal" data-target= "#myModal" requires the modal box of the open mymodal--> <a data-toggle=
 " Modal "data-target=" #myModal > Service agreement </a>
 </p>
 <p>
  <!--class= "BTN Btn-danger" Is the style of the button in the bootstrap. -->
 <button type= "button" class= "btn Btn-danger" data-toggle= "modal"
 data-target= "#myModal" >
 Click here to read the service agreement
 </button>
 </p>

(3) Modal box part

The modal box is basically as follows:

So there's the following code:

<!--class= "modal fade" is required modal box to animation effect fade Open, class= "modal" also line, but open very abrupt. Id= "Mymodal" echoes the Hyperlinks and buttons above--> <div class= "Modal Fade" id= "Mymodal" role= "dialog" > <div class= " Modal-dialog > <!--must be modal-content before the modal box can be laid out. --> <div class= "modal-content" > <div class= "Modal-header" > <!--this is the title section of the Modal box, &times plus the transfer character of the semicolon X, in essence is a closing button--> <button type= "button" class= "Close" data-dismiss= "modal" > <span>x</span> </button > <!--This is the title of modal box--> 
 

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.