Extended Bootstrap 4 Modal Demos

  1. Default

  2.             showmodal({content:"Bootstrap 4 Modal Content Here"});
            
  3. Primary

  4.             showmodal({flag:"primary",Qclose: true});
            
  5. Secondary

  6.             showmodal({flag:"secondary",Qclose: true});
            
  7. Success

  8.             showmodal({flag:"success",Qclose: true});
            
  9. Danger

  10.             showmodal({flag:"danger",Qclose: true});
            
  11. Warning

  12.             showmodal({flag:"warning",Qclose: true});
            
  13. Info

  14.             showmodal({flag:"info",Qclose: true});
            
  15. Light

  16.             showmodal({flag:"light",Qclose: true});
            
  17. Dark

  18.             showmodal({flag:"dark",Qclose: true});
            
  19. White

  20.             showmodal({flag:"white",Qclose: true});
            
  21. Custom Title

  22.             showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here",
                    SWidth: 200,
                    fontSize: 14
                });
            
  23. Alignment

  24.             showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here, Bootstrap 4 Modal Content Here, Bootstrap 4 Modal Content Here",
                    SWidth: 400,
                    fontSize: 14,
                    titleCenter:true,
                    contentLeft:true
                });
            
  25. Disable hideClick

  26.             showmodal({content:"Bootstrap 4 Modal Content Here",hideClick:"static "});
            
  27. Callback after shown

  28.             showmodal({
                    content:"Bootstrap 4 Modal Content Here",
                    callbackShown:function(){
                        console.log("Shown");
                    }
                })
            
  29. Callback after hidden

  30.             showmodal({
                    content:"Bootstrap 4 Modal Content Here",
                    callbackHide:function(){
                        console.log("Hidden");
                    }
                })
            
  31. Iframe Modal

  32.             showmodal({
                    isText: false,
                    title: "iFramw Modal",
                    src: "https://www.youtube.com/embed/9BuLEu6_nb8",
                    Bclose: false
                });
            
  33. With Parameters

  34.             let bigParam = {
                    a: 1,
                    b: 2,
                    c: 'param',
                    d: 1,
                    e: 2,
                    f: 'param',
                    g: 1,
                    h: 2,
                    i: 'param'
                }
                showmodal({
                    isText: false,
                    src: "https://www.youtube.com/embed/9BuLEu6_nb8",
                    data: bigParam,
                    callbackShown:function(){
                        let _this = this;
                        console.log(_this.src);
                        console.log(_this.translateParamsToJson());
                    }
                })
            
  35. Iframe Padding

  36.             showmodal({
                    isText: false,
                    title: "Iframe Modal",
                    src: "https://www.youtube.com/embed/9BuLEu6_nb8",
                    iframePadding: true
                });
            
  37. With Input Field

  38.             showmodal({
                    isText: false,
                    title: "Iframe Modal",
                    src: "https://www.youtube.com/embed/9BuLEu6_nb8",
                    Bclose: false
                });
                $(function () {
                    $(document).off('focusin.bs.modal');
                    $("#txtXXX").focus();
                })
            
  39. Confirm Callback

  40.             showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here",
                    callbackB: true,
                    callbackBF:function(){
                    //dosomething
                        console.log("Confirm!");
                    return true;
                    }
                });
            
  41. Confirm Callback (asyn)

  42.             showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here",
                    callbackB: true,
                    callbackBF:function(){
                    var _this=this;
                        $.ajax({
                            type: "POST",
                            url: "demo.json? &T=" + Math.random(),
                            dataType: 'text',
                            async: false,
                            success: function (t) {
                                var data = window.eval('(' + t + ')');
                                if (t.length > 0) {
                                    console.log("123");
                                    console.log("123"+data.news);
                                    _this.closeModal();
    
    
                                }
                            }
                        });
    
                            return false;
                    }
                });
            
  43. Justify buttons

  44.             showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here",
                    Qclose: true,
                    Justify:true,
                    callbackQ: true,
                    callbackQF:function(){
                    //dosomething
                        console.log("//dosomething");
                     return true;
                    }
                });
            
  45. Cancel Callback

  46.             showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here",
                    Qclose: true,
                    callbackQ: true,
                    callbackQF:function(){
                    //dosomething
                        console.log("Cancel");
                     return true;
                    }
                });
            
  47. Multiple Instances

  48.             showmodal({
                    title: "Info",
                    content: "Are You Sure?",
                    modalIndex: "01",
                    Qclose: true,
                    callbackB: true,
                    callbackBF: function() {
                        showmodal({
                            title: "Info",
                            modalIndex: "02",
                            content: "Are You Sure2",
                            Qclose: true,
                            SWidth: "300",
                            hideClick: "static",
                            fontSize: "18",
                            callbackB: true,
                            callbackBF: function() {
                                showmodal({
                                    title: "Info",
                                    modalIndex: "03",
                                    content: "Are You Sure3",
                                    Qclose: true,
                                    SWidth: "200",
                                    hideClick: "static",
                                    fontSize: "18"
                                });
                                return false;
                            }
                        });
                        return false;
                    }
                });
            
  49. Fullscreen

  50.          showmodal({
                    title: "Warning",
                    content: "Bootstrap 4 Modal Content Here, Bootstrap 4 Modal Content Here, Bootstrap 4 Modal Content Here",
                    isZoom: true,
                    zoomCallback: function (){
                        console.log(this.Sheight,this.SWidth);
                    }
                });