Modal Types (Advanced)

Easier more than you might think, included all possible scenarios with examples for each case.

How to use it?
You ONLY need to reference the modals library javascript file into script inside your page 
<script type="text/javascript" src="/bscom.modals.js"></script>
Please make sure that bootstrap version 4 and also jquery library both are already referenced in your pages before start using this library

Confirm Modal Confirm can be used in different ways with flexibility to specify class names and titles of buttons with event handlers for each one. below are some examples with short description. if you need more info. drop me an email "m.solimanz@hotmail.com"

Simplest way: Inline Event Handler


<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?", function(){ alert("Okay"); });'>
    Confirm
</button>
Simplest way: Function Name as a string 

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?", "okayHandler")'>Confirm</button>

<script>
var okayHandler = function(){ alert("Okay"); }
</script>
Simplest way: Function Name as a string 

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?", "okayHandler")'>Confirm</button>

<script>
var okayHandler = function(){ alert("Okay"); }
</script>
Easy to change titles of buttons 

bscom.modals.confirm("Confirm?", "Are you sure?", {yup: "yupHandler", nope: "nopeHandler"});
bscom.modals.confirm("Confirm?", "Are you sure?", {yup: function(){...}, nope: function(){...}});
2 Handlers (yes/no): Either define using inline function or by specifying function names. 

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?",
                        function(){ alert("Okay Pressed!");},
                        function(){ alert("No Pressed!");})'>Confirm</button>

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?","yesHandler", "noHandler")'>
    Confirm
</button>

<script>
    var yesHandler  = function(){ alert("Okay Pressed!"); }
    var noHandler = function(){ alert("No Pressed!"); }
</script>
Titles of buttons can be specified along with actions and class names to be applied 

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?",
        {okay: {action: function(){ alert("Okay Pressed!");}, class: "btn btn-primary"},
        cancel: {action: function(){ alert("No Pressed!");}, class: "btn btn-secondary"}})'>
    Confirm 1
</button>

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?",
                { yup: {action: "yup", class: "btn btn-primary"}, nope: {action: "nope"}})'>
    Confirm 2
</button>

<script>
    var yup  = function(){ alert("Yup Pressed!"); }
    var nope = function(){ alert("Nope Pressed!"); }
</script>
However it is not popular you can have only one button and the cancel should be the close button in title or even click outside the modal 

<button class="btn btn-primary"
    onclick='bscom.modals.confirm("Confirm?", "Are you sure?",
                { yup: {action: "yup", class: "btn btn-primary"}})'>
    Confirm
</button>