In bootstrap, the attributes of the modal box and modal box are as follows:

In bootstrap, the attributes of the modal box and modal box are as follows:

You can see if the modal box is needed in the work.

<Div class = "modal fade" id = "userModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" data- backdrop = "static" data-keyboard = "false"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal- header "> <button type =" button "class =" close "data-dismiss =" modal "aria-hidden =" true "id =" btnCancel "> & times; </button> 

 
The modal box has an attribute to prevent the modal box from being closed by clicking the mask layer. Is the data-backdrop = "static" set in the div ". This prevents the modal box from being closed due to a sudden misoperation when the content is entered in the modal box.
Another attribute is data-keyboard = "false ". In this case, it is set to press the ESC return key, which is invalid. It is also used to prevent the modal box from being closed due to sudden misoperations.
 

 
<Div id = "toolbar" class = "btn-group"> <button id = "btn_add" type = "button" class = "btn-newAdd" data-toggle =" modal "data-target =" # userModal "> <span class =" glyphicon-plus "aria-hidden =" true "> </span> added </button> <button id = "btn_edit" type = "button" class = "btn-newAdd"> <span class = "glyphicon-edit" aria-hidden = "true"> </span> modify </button> <button id = "btn_delete" type = "button" class = "btn-newAdd"> <span class = "glyphicon-remove" aria-hidden = "true"> </span> Delete </button> </div>
The data-toggle = "modal" data-target = "# userModal" button attribute opens the modal box.