jquery.d_modal.js library.
The modal you just encountered was automatically instantiated by having the class .d-modal:
<div class="d-modal d-modal-blocking">
Hello. This modal was generated by the <code>jquery.d_modal.js</code> library.
</div>
d_modal is a jQuery library with an emphasis on simplicity and ease-of-use. All you need is to include jQuery and the d_modal library. It's easy to create a new modal interactively:
$.d_modal("This is a new modal.");
It supports multiple modals (by simply stacking them) – try clicking the "Show me" button several times.
You may notice that the modals created with the code above don't block the screen. We can change that:
$.d_modal("Blocking modal", {
blocking: true
});
There are a few more options you can use to customize the modal. See the full list
The created modal is a jQuery object, so you can chain calls just like you're used to!
$.d_modal("Happy modal").addClass("success");
You can also turn existing jQuery objects into modals - both by id (this paragraph has the id
#to-modal) or by creating an element with jQuery:
$("#to-modal").d_modal();
$("<div></div>").text("Hello, world").d_modal();
text()
and html(), as well as functions to hide elements. To hide a modal, you should
trigger it's dismiss.d_modal event.
Read more
On the topic of customizations... it's easy to change the look of the modal, and you can do this however you want. A sample stylesheet (d_modal-default.less) is included so you know where to start.
The source files for the project are: