3
\$\begingroup\$

I have created dynamic Bootstrap 4 modal using JavaScript OOP. Please verify and give your reviews how I can improve the code. I have passed four parameters to create a dynamic modal:

  1. openPopup class (for click)
  2. data-title (dynamic title)
  3. data-href (dynamic load html in modal)
  4. data-target (target id if i have multiple modal)

    class Modal{
          constructor(id,url,title){
             this.id = id;
             this.url = url;
             this.title = title;
         } 
       }
        class UI{
             static addModal(){
             $('body').on('click', '.openPopup', function(e) {
             const id = $(this).attr('data-target'),
             url = $(this).attr('data-href'),
             title = $(this).attr('data-title')
             const modal = new Modal(id, url, title);
             console.log(modal)
             if($('#'+ modal.id).length){
              $('#'+ modal.id).modal({show:true});
             }
            else{
            let html = `
           <div class="modal fade" id="${modal.id}" tabindex="-1" 
       role="dialog">
          <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">${modal.title} 
           </h5>
          <button type="button" class="close" data-dismiss="modal" aria- 
            label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div id="${modal.id}body" class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
                dismiss="modal">Close</button>
            <button type="button" id="save" class="btn btn-primary">Save 
       changes</button>
          </div>
        </div>
        </div>
         </div>`;
        $('body').append(html);
        $('#'+ modal.id + 'body').load(modal.url,function(){
       $('#'+ modal.id).modal({show:true});
       });
         }
       })
       }}
        class ModalApp{
           static init(){
             console.log('App Started...');
            UI.addModal()
            }
        }
        ModalApp.init();
   <button type="button" class="btn btn-primary openPopup"  data-title="Test 
  about" data-href="partial/about.html" data-toggle="modal" data- 
  target="myModal1">
    Launch demo about
   </button>

See the fiddle below

JSfiddle

\$\endgroup\$
  • \$\begingroup\$ i want you guys review my JavaScript code. \$\endgroup\$ – user11657014 Jun 17 at 7:10
  • \$\begingroup\$ What were your objectives when you created this code? \$\endgroup\$ – KIKO Software Jun 17 at 7:53
  • \$\begingroup\$ quality of code. \$\endgroup\$ – user11657014 Jun 17 at 8:28
  • \$\begingroup\$ Take a look at this coding style guide. \$\endgroup\$ – KIKO Software Jun 17 at 10:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.