Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want pop up onclick
I am not getting pop up please help
here is my code
HTML
<html>
<head>
<style type="text/css">
@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
.modal {
    display: none;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.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
Updated 8-Oct-15 23:34pm
v4

1 solution

You have not included the bootstrap.min.js file after jquery-1.11.0.js

HTML
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


Fiddle[^]
 
Share this answer
 
v2
Comments
Hussain Javed 9-Oct-15 1:41am    
I have tried your code. it is not getting
here is my code
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.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">


</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">


</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>
Palash Mondal_ 9-Oct-15 2:05am    
Have you included ``bootstrap.min.js`` after ``jquery-1.11.0.js``?
Hussain Javed 9-Oct-15 2:10am    
I have included that js file also
Palash Mondal_ 9-Oct-15 2:59am    
Is this Fiddle[^] working for you?
Hussain Javed 9-Oct-15 3:04am    
No its not working. i have included this two files
<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>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900