Discussion on some problems in the use of bootstrap and _javascript skills of solving process

Bootstrap is a good front-end frame. Here are some questions that have been encountered in use.

The problem of 1.bootstrap modal box modal. Sometimes the mask blocks the modal box when the Modal box pops up.

The reason for this problem is most likely that the HTML code for the modal box is placed in the wrong place. Look at the official document. The description is as follows:

Where the HTML code for the modal box is placed

Be sure to place the HTML code of the modal box at the highest level of the document (that is, try to act as a direct child of the body tag) to prevent other components from affecting the presentation and/or functionality of the modal box.

If for some reason we can't put the HTML code of the modal box at the top level, then we can move it over.

jQuery Code: If necessary, please translate it into Javasccipt code.

This question tells us that the document is important.

2. When using the map API at the same time use bootstrap, there may be bootstrap and map conflict, the map does not show the situation. The problem here is mainly encountered when using the variant Zui of Bootstrap.

Because Bootstrap has many of its own CSS. So sometimes there are conflicts with the map API. leads to a map or some controls on a map that don't show up. I used to Webapi and Zui when the map was not loaded with the picture.

The process of solving the problem:

1. Open the browser developer tool to see if the console console has no error. There is no. Look at the resources in the network, map-related picture resources are not loaded. Yes.

2. Map called code from the project independent, see whether the normal display. Yes.

3. In the project, use the second half to delete the referenced js,css to see if these JS or CSS affect the world map API. Locking problem in Zui.css.

4. Check the map in the elements there are some CSS below the div. Finally found this sentence.

Audio, Canvas, IMG, SVG, video { 
  max-width:100%; 
  Vertical-align:middle; 

OK, problem solving, zui and heaven and Earth map webapi conflict out on the max-width:100%. Modified into Max-width:none; The map was shown successfully. Of course not directly modify its source code, but under the corresponding div to cover that attribute.

Later do the run track, found that the callout maker and line lines are not displayed. After the comparison with the normal. And in the console query, found that the callout and line are loaded. It's just not showing it successfully. It turns out to be an SVG problem. is also the effect of the code above. Modified to be able to display the normal.

3.ZUI Initializes an abnormal problem with the data table. Datatable.js.

There is a powerful data table plugin in the Zui. You can sort the first column of a data table.

According to the official document, as long as this sentence can initialize the form plug-in, the normal sort.

But when we use it, our little partner finds that it does not work, and does not achieve the sort effect in the example. So I solved the problem.

At first it must be suspected that a small partner where the interface did not invoke the right, however, I tried it myself, and there is no use.

So continue to look at the interface, and find another way to initialize, you need to spell the data itself into an array to pass in.

/* Use the startup parameter option to initialize the data/ 
$ (' table.datatable '). DataTable ({ 
  data: { 
    cols: [ 
      {width:80, text: ' # ', type: ') Number ', Flex:false, Colclass: ' Text-center '}, 
      {width:160, text: ' Time ', type: ' Date ', Flex:false, sort: ' Down '},
   
    {width:80, Text: ' Name ', type: ' String ', Flex:true, Colclass: '} 
    ], 
    rows: [ 
      {checked:false, data: [1, ' 2016 -01-18 11:05:15 ', ' name Example 1 ']}, 
      {checked:false, data: [2, ' 2016-01-20 12:06:16 ', ' name Example 2 ']}, 
      //More data 
    ] 
  }, 
  //Other Startup parameter options 

   

I spelled one, and found that it can initialize normally, and achieve the desired effect. But it is obviously not cost-effective to spell a large number of items each time you call it. So what's the problem?

So the breakpoint. Into the source code, found that the difference between the two ways is a data passed in, a no data passed in. In the source code for the absence of data in the case of processing is their own based on the contents of the table to generate data.

So I'm going to use Console.log (json.stingify data) to generate the final data, and use this generated data to initialize the data in the second way. Discovery does not function properly.

The problem is then locked into the generated data.

By comparing the data in the example and the data generated, it was found to be different. The data for each row in the example is an array containing the contents of each of the squares, which is the direct amount. And the data for each row of the generated information is an array of each of the grid objects, and the object contains a few messages. This is where the difference lies. There are also some differences in the resulting table header data.

The source code is then modified according to the data requirements in the example.

Cols.push ($.extend ( 
{ 
  text: $th. html (), 
  flex:false | | | $th. hasclass (' Flex-col '), 
  width: ' Auto ', 
  cssClass: $th. attr (' class '), 
  CSS: $th. attr (' style '), 
  type: ' String ', 
  ignore: $th. Hasclass (' Ignore '), 
  sort:! $th. Hasclass (' sort-disabled '), 
  mergerows: $th. attr (' merge-rows ') 

For

$t. Find (' thead > Tr:first '). Children (' th ')-each (function () 
{ 
  $th = $ (this); 
  Cols.push ($.extend ( 
  { 
    text: $th. html (), 
    flex:false | | | $th. hasclass (' Flex-col '), 
    width: ' Auto ', 
    cssClass: $th. attr (' class '), 
    colclass: $th. attr (' class '), 
    CSS: $th. attr (' style '), 
    type: ' String ', 
    ignore: $th. Hasclass (' Ignore '), 
    sort:! $th. Hasclass (' sort-disabled ') 
  }, $th. Data ())); 

Modify:

Row.data.push ($.extend 
{ 
  cssClass: $td. attr (' class '), 
  CSS: $td. attr (' style '), 
  text: $TD. html (), 
  Colspan:colspan 

For:

Test

Successfully initialized. The sort may be normal. The table CSS is normal. Preliminary solution to the problem.

Attached: Zui documents: http://zui.sexy/

Bootstrap Documents: http://v3.bootcss.com/javascript/

The front end of the inevitable encounter a variety of problems. Do not panic, step by step, master the scientific system of the discovery problem and solve the problem of the method, can quickly lock the problem and then solve the problem.

The above is small series for everyone to bring to the bootstrap in the use of some of the problems and solve the process of all the content, I hope that we support cloud-Habitat Community ~