Spectacularly simple and flexible jQuery drop-down plugin (Bootstrap 4)

Here is a very simple, yet flexible, custom drop-down selection control.  Very lightweight JavaScript and all the needed options.  You can also register to be notified of a selection and have it pass you a HTML "data-" tag value.  You'll need jQuery and Bootstrap.

Note: You write your use normal Bootstrap 4 drop-down menu code, then just create an instance of the plugin, and wah-lah!  Very nice.

Give it a whirl on on JsFiddle.

Vue 2.0 modal in Bootstrap 4, a confirmation modal example for everyone

I was a bit tired of looking for a suitable example of using a Bootstrap 4.0 modal within Vue.js.

Here is a Vue component to do just that.  I've included an example of how to use.  After the initial comments of the Example, everything else is your JavaScript component file.

I welcome comments if folks have improvements...but let's keep it simple for everyone else.

 // jQuery required as Bootstrap uses it, but if you use another non-jQuery  
 // modal framework, you can modify the show() function to remove jQuery modal 'show'  
 //  
 // Example:  
 //  
 // <div id="app">  
 //  <button type="button" class="btn btn-secondary" v-on:click="$refs.modal.show()">Modal</button>  
 //  <confirm-component ref="modal" v-bind:options="confirmOptions()" v-on:closeCancel="cancel" v-on:closeNo="no" v-on:closeYes="yes"></confirm-component>  
 // </div>  
 //  
 // <script>  
 // var vueApp = new Vue({  
 //  el: '#app',  
 //  ...  
 //  
 // confirmOptions() {  
 //  return {  
 //    title: '<i>Do you really want to do this?</i>',  
 //    message: 'Going to do something really <strong>major</strong>...continue?',  
 //  
 //    textCancel: 'CANCEL', // defaults to 'Cancel'  
 //    textNo: 'NO',     // defaults to 'No'  
 //    textYes: 'YES',    // defaults to 'Yes'  
 //  
 //    showNo: true,     // defaults to true  
 //    showNo: false,     // defaults to false  
 //    showYes: true     // defaults to true  
 //  };  
 // }  
 // cancel() {  
 //  alert('cancel');  
 // },  
 // no() {  
 //  alert('no');  
 // },  
 // yes() {  
 //  alert('yes');  
 // }  
 // });  
 // </script>  
   
   
 "use strict";  
 Vue.component('confirm-component', {  
    props: ['options'],  
    methods: {  
       show() {  
          $('#confirmModalComponent').modal('show');  
       }  
    },  
    computed: {  
       modalTitle() {  
          return this.options.title ? this.options.title : '';  
       },  
       modalMessage() {  
          return this.options.message ? this.options.message : '';  
       },  
       modalTextCancel() {  
          return this.options.textCancel ? this.options.textCancel : 'Cancel';  
       },  
       modalTextNo() {  
          return this.options.textNo ? this.options.textNo : 'No';  
       },  
       modalTextYes() {  
          return this.options.textYes ? this.options.textYes : 'Yes';  
       },  
       showCancel() {  
          return this.options.showCancel ? this.options.showCancel : true;  
       },  
       showNo() {  
          return this.options.showNo ? this.options.showNo : false;  
       },  
       showYes() {  
          return this.options.showYes ? this.options.showYes : true;  
       },  
       closeCancel() {  
          this.$emit('closeCancel');  
       },  
       closeNo() {  
          this.$emit('closeNo');  
       },  
       closeYes() {  
          this.$emit('closeYes');  
       }  
    },  
    template: `  
 <div class="modal fade" id="confirmModalComponent" tabindex="-1" role="dialog" aria-labelledby="confirmModalComponentLabel" aria-hidden="true">  
  <div class="modal-dialog" role="document">  
   <div class="modal-content">  
    <div class="modal-header">  
     <h5 class="modal-title" id="confirmModalComponentLabel" v-html="modalTitle"></h5>  
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
      <span aria-hidden="true">&times;</span>  
     </button>  
    </div>  
    <div class="modal-body" v-html="modalMessage">  
    </div>  
    <div class="modal-footer justify-content-between">  
     <div>  
       <button v-if="showCancel" type="button" class="btn btn-primary" :click="closeCancel" data-dismiss="modal">{{modalTextCancel}}</button>  
     </div>  
     <div>  
       <button v-if="showNo" type="button" class="btn btn-primary" :click="closeNo" data-dismiss="modal">{{modalTextNo}}</button>  
       <button v-if="showYes" type="button" class="btn btn-success" :click="closeYes" data-dismiss="modal">{{modalTextYes}}</button>  
     </div>  
    </div>  
   </div>  
  </div>  
 </div>  
 `  
 });