Bootstrap modal Multiple Pop up Window Overlay Displays No Pop up Window Problem Solution

Recently, I have been using Bootstrap and encountered many problems. I have learned a lot and learned a lot through google. Aiming at the problem that 'Bootstrap modal multi-pop-up window can't be displayed by superposition', I will talk about my own solution.

Of course, it is still the official proposal that 'It is best not to overlay multiple modal, which is easy to have front-end component problems that are difficult to solve'

Sample code:

<div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' style='display:none'>
     <div class='modal-dialog modal-max-lg'>
     <div class='modal-content'>
      <div class='modal-header'>
      <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
      <h4 class='modal-title'>Map Features</h4>
      </div>
      <div class='modal-body'>
      <div>
       <table>
        <tr>
         .....
         <td>
         <div class='bs-example-modal-lg fade modal' id='feature-mapping-dialog-form' style='display:none'>
     <div class='modal-dialog modal-max-lg'>
     <div class='modal-content'>
      <div class='modal-header'>
       <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
      <h4 class='modal-title'>Map Features</h4>
      </div>
      <div class='modal-body'> 
      ...

script:

 $( "#feature-mapping-dialog-form" ).bind('show.bs.modal',function(){
  if($( "#feature-mapping-dialog-form" ).attr("data")=="1"){
  $("#ajax_search_done").val("NO");
  $("#edit_path_lba_tree").jstree("deselect_all");
  $("#edit_path_lba_tree").jstree("close_all");
 ...
  $( "#feature-mapping-dialog-form" ).attr("data","0");  
 })
$( "#feature-mapping-dialog-form" ).bind('hide.bs.modal',function(){
  if($( "#feature-mapping-dialog-form" ).attr("data")=="1"){
  $("#edit_path_lba_tree").jstree("deselect_all");
  $("#edit_path_lba_tree").jstree("close_all");
  ... 
  $( "#feature-mapping-dialog-form" ).attr("data","0"); 
 }) 

The effect is to pop up the second modal on the basis of the first bullet box

Many people here will ask, mine is no problem, it is displayed directly, please look at the code, if your modal div is directly under body, and modal does not have other additional action monitoring, such as' show. bs. modal ',' hide. bs. modal 'and other monitoring events, simply pop up and display the text content, there will be no problem, if there is the above logic code, then modal pop-up window will go wrong, that is, the second modal will not be displayed.

My solution to this problem is:

<div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' style='display:none'>

Add data attribute to distinguish modal

Before calling xxxx. modal (), set to "1" to enter the listening code

Judge whether it is the first modal access, process the logic and reset it to 0.