Scribd
Upload
19 views4 pages

javascript_6

js pr 13

Uploaded by

Ritesh Doibale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views4 pages

javascript_6

js pr 13

Uploaded by

Ritesh Doibale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Name :Mohammed Noman Roll No : 270

Experiment no 13 F

Program :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>DOM, Popovers, and Window Operations</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
.popover {
display: none;
position: absolute;
padding: 10px;
background-color: #f8f9fa;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
}
#dynamicContent {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>DOM Manipulation, Popovers, and Window Operations</h1>
<!-- Button to open a popover -->
<button id="popoverButton">Show Popover</button>

<!-- Container for dynamic content -->


<div id="dynamicContent"></div>

<!-- Popover element -->


<div id="popover" class="popover">
<p>This is a popover!</p>
<button id="closePopover">Close</button>
</div>
<!-- Button to open a new window -->
<button id="openWindowButton">Open New Window</button>

<script>
// DOM Manipulation Example
// Add content dynamically to the page
const dynamicContentDiv =
document.getElementById('dynamicContent');
dynamicContentDiv.innerHTML = '<p>This content was added
dynamically via JavaScript!</p>';

// Popover functionality
const popoverButton = document.getElementById('popoverButton');
const popover = document.getElementById('popover');
const closePopoverButton =
document.getElementById('closePopover');

// Show popover when button is clicked


popoverButton.addEventListener('click', function() {
const buttonRect = popoverButton.getBoundingClientRect();
popover.style.left = `${buttonRect.left + window.scrollX}px`;
popover.style.top = `${buttonRect.bottom + window.scrollY +
10}px`;
popover.style.display = 'block'; // Show popover
});
// Close the popover when close button is clicked
closePopoverButton.addEventListener('click', function() {
popover.style.display = 'none'; // Hide popover
});
// Window operation: Open a new window
const openWindowButton =
document.getElementById('openWindowButton');

openWindowButton.addEventListener('click', function() {
const newWindow = window.open('', 'NewWindow', 'width=500,
height=400');
newWindow.document.write('<h1>Welcome to the new window!
</h1>');
newWindow.document.write('<p>This content is dynamically
added using JavaScript in a new window.</p>');
});
</script>
</body>
</html>
OUTPUT :

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy