Multiple Bootstrap Modal Popups: Open Modal Popup from Modal Popup

Last Reply on Oct 09, 2015 06:43 AM By Shashikant

Posted on Oct 09, 2015 12:37 AM

I am working on house of blouse website. if you click country name button at top right corner of page.please refer http://www.houseofblouse.com/index.

here is my code

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
function showDialog2() {
    $("#dialog1").removeClass("fade").modal("hide");
    $("#dialog2").addClass("fade").modal("show");
}

$("#dialog1").modal("show");

$("#dialog-ok").on("click", function () {
    showDialog2();
});
</script>
</head>
<body>
<div id="dialog1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title">Modal Dialog 1</h4>

            </div>
            <div class="modal-body">This is the first modal dialog</div>
            <div class="modal-footer">
                <button type="button" id="dialog-ok" class="btn btn-default">Show dialog 2</button>
                <button type="button" id="dialog-close" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="dialog2" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title">Modal Dialog 2</h4>

            </div>
            <div class="modal-body">This is the second modal dialog</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

Posted on Oct 09, 2015 06:43 AM

Hi hussain,

Here I have created sample that will help you out.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript" src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script type="text/javascript">
        function showDialog2() {
            $("#dialog1").removeClass("fade").modal("hide");
            $("#dialog2").addClass("fade").modal("show");
        }
        $(function () {
            $("#dialog1").modal("show");
            $("#dialog-ok").on("click", function () {
                showDialog2();
            });
        });
       
    </script>
</head>
<body>
    <div id="dialog1" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Modal Dialog 1</h4>
                </div>
                <div class="modal-body">
                    This is the first modal dialog</div>
                <div class="modal-footer">
                    <button type="button" id="dialog-ok" class="btn btn-default">
                        Show dialog 2</button>
                    <button type="button" id="dialog-close" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog2" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Modal Dialog 2</h4>
                </div>
                <div class="modal-body">
                    This is the second modal dialog</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        OK</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Demo