Modals

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

Simple, Using Data Attributes
In just one line of code you can do it, just a simple anchor with some data elements/attributes, all it needs is to add data-toggle="modal", data-title and data-message|data-body 
<a
    data-toggle="modal"
    data-title="Simple"
    data-body="Hello World"
    href="#"
    class="btn btn-primary">Simple</a>
Simple
Styled content can be added/wrapped inside data-body atribute 
<a
    data-toggle="modal"
    data-title="Styled"
    data-body="<h3>Hello World</h3><div class='bg bg-info'>this is styled content</div>"
    href="#"
    class="btn btn-primary">Simple</a>
Styled Content

Call backs can be added easily via data elements: data-callback and data-hidden-callback, both displayed and completed functions should be defined in the page in scripttag 

              
<a data-toggle="modal"
    data-title="Simple"
    data-callback="displayed"
    data-hidden-callback="completed"
    data-body="<h3>Hello World</h3>" href="#"
    class="btn btn-primary">Callbacks


                  <script>
    function displayed() {
        alert("I am displayed");
    }

    function completed() {
        alert("I am done");
    }
</script>
Callbacks
After closing the popup, call backs can access the whole form in the popup to get any value from the window/modal before it is going to be destroyed at all from DOM. 

<a
    data-toggle="modal" data-title="Callback"
    data-body="<h5>Close me now and It will fire a function named completed_params with passing this form back to parent or caller</h5>"
    data-hidden-callback="completed_params"
    href="#" class="btn btn-primary">Simple</a>

<script>
    function completed_params($mw) {
        alert("I am done, all form: " + $($mw).find(".modal-body").html());
    }
</script>
Callback [access to form]
Size of modal window simplified using data-sz or data-size 
            
<a data-toggle="modal" data-title="Small" data-body="Small, just use data-size='sm'" data-sz="sm"
href="#" class="btn btn-primary">Simple</a>

<a data-toggle="modal" data-title="Medium" data-body="Medium, just use data-size='md'" data-sz="md"
href="#" class="btn btn-primary">Medium</a>

<a data-toggle="modal" data-title="Large" data-body="Large, just use data-size='lg'" data-sz="lg"
href="#" class="btn btn-primary">Large</a>
Small Medium large

Ajax Simplified via data-ajax, it will implicitly get the resource from remote server using jquery and display it as the body of the modal.


<a data-toggle="modal" data-title="Ajax"
    data-ajax="../resource.html"
    href="#" class="btn btn-primary">Simple</a>
Simple Ajax
Using Javascript
In javascript, you can call modal from namespace bscom.modals, just pass only the title and body of your message you want to display, the body of your message to be displayed inside modal window can have full html along with javascript to be handled 

<a id="simple" href="#" class="btn btn-primary">Simple JS</a>

<script>
    $("#simple").click(function (e) {
        e.preventDefault();
        bscom.modals.simple("Title", "Here I'm simple <button class='btn btn-danger'
        onclick='bscom.modals.close();'>Close Me!</button>");
    });
</script>
Simple JS
Get the resource using jQuery and inject what is coming from there into the modal content, it will execute any javascript too like handling event handlers for modal's input elements. 

$("#ajax").click(function (e) {
    e.preventDefault();

    $.get("./resource.html", function (response) {
        bscom.modals.open("Remote Resource", response, "md", {} ,
            function(){
                alert("test");
            },
            function($mw){
                alert("I am done, " + $mw.find(".modal-body").html());
            }
        );
    });
});
Ajax Call with Callbacks

By default size is small when calling simple() function however if you called show() or open() default size is medium


$("#ajax_simple").click(function (e) {
  e.preventDefault();

  $.get("//raw.githubusercontent.com/msolimans/BSComponents/master/cresource.html", function (data) {
     bscom.modals.simple("Remote", data);
  });

});

Simple Ajax

Modal Types

Different types and styles for modals are also supported, suppose you want to warn your users or to inform them with a notification, give them an error or confirm to do some action like deleting an item or doing some critical action

Simple Modal 
bscom.modals.simple("Simple", "Simple Msg")
Success Modal 
bscom.modals.success("Success", "Success Msg")
Info Modal 

//inform or info (just naming)
bscom.modals.info("Info!", "Info goes here!");
bscom.modals.inform("Info!", "Info goes here!");
Warning Modal 

//warn or warning (just naming)
bscom.modals.warn("Warning!", "My Warning");
bscom.modals.warning("Warning!", "My Warning");
Error Modal 

//error or err (just naming)
bscom.modals.err("Err!", "Error goes here");
bscom.modals.error("Error!", "Error goes here");
Confirm Modal 

bscom.modals.confirm("Confirm?",
     "Are you sure?",
     function(){ alert("Okay"); });'>
For more Advanced Modal Types scenarios and actions, please check this link!  

Periodic Timeouts
Timeout Modal

This should display a popup window periodically, by default it is ticking/poping up after 3 seconds and counts for 10 seconds more then redirecting to redirecturl

Most Important Parameters: 
bscom.modals.timeout("Timeout",
                      "Should redirect to 'redirect' after {{c}}, you can 'Stay Connected'/'Logout'")
Want more configuration options, please check this