Here what I am doing is opening the modal window in which there are two buttons one is close button and other is open other model button. On clicking the other modal window other modal opens up and the previous one fades away. Here i will show you how to open another modal window if the previous modal window is still there we are using bootstrap modal for this.
Step 1: Html goes like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Modal in other Modal</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<a href="#myModal" role="button" class="btn" data-toggle="modal">Open modal 1</a>
</div>
<div id="myModal" class="text-center custom_model modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Hellooo</h3>
</div>
<div class="modal-body">
<p>This is the first modal</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<a href="#myModal2" role="button" class="btn" data-toggle="modal">Open other modal</a>
</div>
</div>
<div id="myModal2" class="text-center custom_model modal fade" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Hieeeeeee</h3>
</div>
<div class="modal-body">
<p>This is the second modal</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</body>
</html>
step 2: Adding style to your code
<style type="text/css">
#myModal2 {
margin-top:279px;
}
.custom_model{height: 40%;width: 40%;background-color: #fff;margin: 0 auto}
</style>
Step 3: Adding the javascript code
<script type="text/javascript">
$('#myModal2').on('show', function() {
$('#myModal').css('opacity', .5);
$('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
$('#myModal').css('opacity', 1);
$('#myModal').removeData("modal").modal({});
});
</script>
In the above JavaScript code what i am doing is applying the on() method on the second modal. The syntax of the on method is defined below
$(selector).on(event,childSelector,data,function,map)
- event- It is required and it specifies one or more event(s) attached to the selected elements.
- childSelector- It is optional and it specifies that the event handler should only be attached to the specific child elements.
- data- It is optional and it specifies additional data to pass along to the function.
- function- It is required and it specifies to run the particular function whenever the event occur.
- map- It specifies to map an event which contains one or more than one event to attach to the selected elements, and functions to run when the events occur.
In the above code on() method is applied to the second modal in which we call the show method in that we change the css property of first modal (changing the opacity to .5 and unbinding the modal). And then we are applying the hidden function to the second modal in which we are changing the opacity to 1 of the first modal and then applying the remove data method of jquery which remove the previous functionality that is added to the second modal and the calling the modal{} which is the by default method of bootstrap.
Here i am also giving the zip file for the Demo.
0 Comment(s)