Pop up Screen using CSSIn this article we are going to see how to create a pop-up screen using jquery and CSS. We are going to set a link, When user clicks that link a pop-up screen will get displayed and a video has been embedded in the pop-up screen (Autoplay video). We are going to have a close button in the pop-up screen which brings it back to main page.

Html inside Another HTML – Ajax + JqueryToday, In this article we are going to see how to load a html/jsp file into another file using ajax.

Many applications make use of Ajax for loading form/file dynamically in the same page to improve performance of the application. When a user selects the option from drop-down box or when user clicks a button etc. We may be required to load or show a Html/Jsp/Forms based on the user input or when user performs any action.

So let us see an example code about how to load a JSP/HTML file within another JSP/HTML file.

Let us create 2 JSP files for this example,

form1.jsp

form1.jsp

1

2

3

4

5

6

7

8

9

10

11

<%@pagecontentType="text/html"pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>JSP Page</title>

</head>

<body>

<h1>Thisisasample text tobe displayed</h1>

</body>

</html>

We are just creating a sample text in form1.jsp
Now we are going to bring this form1.jsp into form2.jsp when user clicks a button

form2.jsp

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<html>

<head>

<title>RegistrationForm</title>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script>

functionAjax(){

$.ajax({

url:'form1.jsp',

dataType:'html',

timeout:500,

success:function(html){

$("div").html(html);

}

});

}

</script>

</head>

<body>

<input type="button"value="Click Here"onclick="Ajax()">

<div>

</div>

</body>

</html>

From the above code, We are using ajax and we are setting the URL of form1.jsp and we are setting its type (html). We are setting the time for the form1 to be displayed and if url and datatype is success, then it will get displayed inside <div> </div>