I am working on house of blouse website if you click country name button at top right corner of pageplease refer httpwwwhouseofblousecomindexhere is my codelthtmlgtltheadgtltscript type34textjavascript34 src34httpscodejquerycomjquery213js34gtltscriptgtltscript src34httpsmaxcdnbootstrapcdncombootstrap335jsbootstrapminjs34gtltscriptgtltscript type34textjavascript34gtfunction showDialog2 34dialo

Hi hussainHere I have created sample that will help you outHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpscodejquerycomjquery213js34gtltscriptgt ltlink rel34stylesheet34 href39httpsmaxcdnbootstrapcdncombootstrap335cssbootstrapmincss39 media34screen34 gt ltscript type34textjavascript34 src39httpsmaxcdnbootstrapcdncombootstrap335jsbootstrapminjs39gtltscriptgt ltscript type34textjavascript34gt function showDialog2 34dialog134removeClass34fade34modal34hide34 34dialog234addClass34fade34modal34show34 function 34dialog134modal34show34 34dialogok34on34click34 function

Multiple Bootstrap Modal Popups: Open Modal Popup from Modal Popup

hussain

SOLVED CLOSED ACTIVE ANSWERED
User: hussain
Posted: on Oct 09, 2015 12:37 AM
Forum: Bootstrap
Answer: 1
Views: 13574

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>

Shashika...

0 3

Reply
ANSWER
User: Shashikant
Replied: on Oct 09, 2015 06:43 AM
Report

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

Multiple Bootstrap Modal Popups: Open Modal Popup from Modal Popup

Company

Explore

Follow us

Contact Us