Classic Lightbox

Lightbox Alert, Confirm, Information, Error

Include the following files into your application


<script src="https://lightbox-js.googlecode.com/files/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="https://lightbox-js.googlecode.com/files/jquery.msgBox.js" type="text/javascript"></script>
<link href="https://lightbox-js.googlecode.com/files/msgBoxLight.css" rel="stylesheet" type="text/css" />

Alert Box


$.msgBox({
    title:"Selam / Hello",
    content:"Merhaba Dünya! / Hello World!"
});
<div class="buttonBlock">
<input onclick="example1();" type="button" value="Example 1" />
</div>    

Information Box


$.msgBox({
    title:"Selam / Hello",
    content:"Merhaba Dünya! / Hello World!",
    type:"info"
});
 

Confirmation Box


$.msgBox({
    title: "Are You Sure",
    content: "Would you like a cup of coffee?",
    type: "confirm",
    buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}],
    success: function (result) {
        if (result == "Yes") {
            alert("One cup of coffee coming right up!");
        }
    }
});
 

Error : afterShow


$.msgBox({
    title: "Ooops",
    content: "Ohh dear! You broke it!!!",
    type: "error",
    buttons: [{ value: "Ok" }],
    afterShow: function (result) {
        alert("Message has been shown!"); 
    }
});

Error : beforeClose


$.msgBox({
    title: "Ooops",
    content: "Ohh dear! You broke it!!!",
    type: "error",
    beforeClose: function () {
        alert("Message will be closed!"); 
    },
    showButtons:false,
    opacity:0.9
});

Auto Close


$.msgBox({
    title: "Ooops",
    content: "Ohh dear! You broke it!!!",
    type: "error",
    showButtons: false,
    opacity: 0.9,
    autoClose:true
});

 

Leave a Reply

Your email address will not be published. Required fields are marked *