Bootstrap modal Scroll Bar Mask Shadow Problem Caused by Superposition of Multiple Pop up Windows

The problem of 'Bootstrap modal multi-pop-up window superposition closing shadow mask' mentioned in the previous article

I summarized the following, for the problems of mask, scroll bar and unable to pop up window caused by modal multi-window superposition, check the source code, and I summarized a method to solve all these problems once without affecting the original modal function, and realized multi-window superposition.

For multiple windows, if we migrate the root node of the second, even the third and fourth modal under body, the above problems will not occur.
How to do this, please see the following code:

Usually, we encounter the problem of multiple pop-ups, which appears in modal set modal, that is:

<div class='fade modal' id='modal_demo' 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='fade modal' id='modal_demo' 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'> 
      ...

The second window pops up in the click event and appears on the first modal layer. Here, we can write the following code in common. js:

$('#click_demo').live('click', function(e) {
 $("#body").append("<div class='fade modal' id='model_dialog'/>");
 $("#body").children().last().append($(this).next().html());
 $("#body").children().last().modal();
});
$("#click_demo").live('hidden.bs.modal',function(){
 $("#body").children().last().remove();
})

click code:

<div id="click_demo",class="idel",style="display:inline" >
 <img alt='click details' src="/icons/demo.png" title="click to details">
<div class='fade modal' id='modal_demo' 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>