How to Add custom bootstrap dialog modal popup box

Last Reply on Dec 03, 2015 06:51 AM By Shashikant

Posted on Dec 03, 2015 04:40 AM

How to Add custom bootstrap dialog 

You are viewing reply posted by: Shashikant on Dec 03, 2015 06:51 AM.
Posted on Dec 03, 2015 06:51 AM Modified on on Dec 03, 2015 06:58 AM


Here I have created sample that will help you out.

Download the below file



    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script src="Js/bootstrap-dialog.js" type="text/javascript"></script>
    <script type="text/javascript">
        var dialog = new bDialog();

        function showModal() {
            createDialog($('#ddlType').val(), 'BootstrapDialog', $("#ddlSize").val());

        function createDialog(dialogType, dialogTitle, dialogSize) {
                title: dialogTitle,
                titleType: dialogType,
                content: $('[id*=dialog]').html(),
                dialogSize: dialogSize

        function hideModal() {

    Dialog Type :
    <select id="ddlType" name="ctl02">
        <option value="default">default</option>
        <option value="info">info</option>
        <option value="warning">warning</option>
        <option value="danger">danger</option>
        <option value="primary">primary</option>
    &nbsp;&nbsp; Dialog Size :
    <select id="ddlSize" name="ctl02">
        <option value="default">default</option>
        <option value="xs">Extra Small</option>
        <option value="sm">Small</option>
        <option value="m">Medium</option>
        <option value="lg">Large</option>
    <input type="button" name="name" value="Show Modal" onclick="showModal()" />
    <br />
    <br />
    <div id="dialog" style="display: none" align="center">
        This is a Bootstrap Dialog.
        <br />
        <br />
        <input type="button" id="btnClose" value="Close" onclick="hideModal()" />