Skip to content

Commit 1da2f9c

Browse files
angiejonesdiemol
angiejones
and
diemol
authored
Modern Modal (#14390)
* New Modal Page * changed file name * adding tests * Running format script --------- Co-authored-by: Diego Molina <[email protected]> Co-authored-by: Diego Molina <[email protected]>
1 parent 7612405 commit 1da2f9c

File tree

3 files changed

+149
-0
lines changed

3 files changed

+149
-0
lines changed

‎common/src/web/modal_dialogs/modern_modal.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<html>
2+
<head>
3+
<title>Modern Modal</title>
4+
<style>
5+
/* Modal background */
6+
#modalBackground {
7+
display: none;
8+
position: fixed;
9+
z-index: 1;
10+
left: 0;
11+
top: 0;
12+
width: 100%;
13+
height: 100%;
14+
overflow: auto;
15+
background-color: rgba(0,0,0,0.4);
16+
}
17+
18+
/* Modal content */
19+
#modalContent {
20+
position: absolute;
21+
background-color: #fff;
22+
padding: 20px;
23+
border: 1px solid #888;
24+
width: 250px;
25+
height: 200px;
26+
z-index: 2;
27+
28+
/* Center the modal */
29+
top: 50%;
30+
left: 50%;
31+
transform: translate(-50%, -50%);
32+
}
33+
34+
/* Close button */
35+
.close {
36+
color: #aaa;
37+
float: right;
38+
font-size: 28px;
39+
font-weight: bold;
40+
cursor: pointer;
41+
}
42+
43+
.close:hover,
44+
.close:focus {
45+
color: black;
46+
text-decoration: none;
47+
cursor: pointer;
48+
}
49+
</style>
50+
</head>
51+
52+
<body>
53+
<p>Modal dialog sample</p>
54+
55+
<input id="trigger-modal-btn" type="button" value="trigger modal" onclick="openModal();">
56+
57+
<a id="trigger-modal-link" href="javascript:openModal()">trigger modal</a>
58+
59+
<!-- Modal structure -->
60+
<div id="modalBackground">
61+
<div id="modalContent">
62+
<span id="modal-close" class="close" onclick="closeModal()">&times;</span>
63+
<span id="modal-text">I am a modal</span>
64+
<input type="text" id="modal-input"/>
65+
</div>
66+
</div>
67+
68+
<script>
69+
function openModal() {
70+
// Display the modal and dim the background
71+
document.getElementById('modalBackground').style.display = 'block';
72+
}
73+
74+
function closeModal() {
75+
// Hide the modal and remove the dimming effect
76+
document.getElementById('modalBackground').style.display = 'none';
77+
}
78+
79+
// Optional: Close the modal when clicking outside of it
80+
window.onclick = function(event) {
81+
var modal = document.getElementById('modalBackground');
82+
if (event.target == modal) {
83+
closeModal();
84+
}
85+
}
86+
</script>
87+
</body>
88+
</html>

‎java/test/org/openqa/selenium/ModernModalTest.java‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// Licensed to the Software Freedom Conservancy (SFC) under one
2+
// or more contributor license agreements. See the NOTICE file
3+
// distributed with this work for additional information
4+
// regarding copyright ownership. The SFC licenses this file
5+
// to you under the Apache License, Version 2.0 (the
6+
// "License"); you may not use this file except in compliance
7+
// with the License. You may obtain a copy of the License at
8+
//
9+
// http://www.apache.org/licenses/LICENSE-2.0
10+
//
11+
// Unless required by applicable law or agreed to in writing,
12+
// software distributed under the License is distributed on an
13+
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
// KIND, either express or implied. See the License for the
15+
// specific language governing permissions and limitations
16+
// under the License.
17+
18+
package org.openqa.selenium;
19+
20+
import static org.assertj.core.api.Assertions.assertThat;
21+
import static org.openqa.selenium.support.ui.ExpectedConditions.visibilityOf;
22+
23+
import org.junit.jupiter.api.Test;
24+
import org.openqa.selenium.testing.JupiterTestBase;
25+
26+
class ModernModalTest extends JupiterTestBase {
27+
28+
@Test
29+
void testButtonOpensModal() {
30+
driver.get(pages.modernModalPage);
31+
driver.findElement(By.id("trigger-modal-btn")).click();
32+
33+
WebElement modal = driver.findElement(By.id("modalContent"));
34+
wait.until(visibilityOf(modal));
35+
assertThat(modal.isDisplayed()).isTrue();
36+
}
37+
38+
@Test
39+
void testLinkOpensModal() {
40+
driver.get(pages.modernModalPage);
41+
driver.findElement(By.id("trigger-modal-link")).click();
42+
43+
WebElement modal = driver.findElement(By.id("modalContent"));
44+
wait.until(visibilityOf(modal));
45+
assertThat(modal.isDisplayed()).isTrue();
46+
}
47+
48+
@Test
49+
void testCloseModal() {
50+
driver.get(pages.modernModalPage);
51+
driver.findElement(By.id("trigger-modal-btn")).click();
52+
53+
WebElement modal = driver.findElement(By.id("modalContent"));
54+
wait.until(visibilityOf(modal));
55+
56+
driver.findElement(By.id("modal-close")).click();
57+
assertThat(modal.isDisplayed()).isFalse();
58+
}
59+
}

‎java/test/org/openqa/selenium/testing/Pages.java‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ public class Pages {
5454
public String mapVisibilityPage;
5555
public String metaRedirectPage;
5656
public String missedJsReferencePage;
57+
public String modernModalPage;
5758
public String mouseInteractionPage;
5859
public String mouseOverPage;
5960
public String mouseTrackerPage;
@@ -119,6 +120,7 @@ public Pages(AppServer appServer) {
119120
mapVisibilityPage = appServer.whereIs("map_visibility.html");
120121
metaRedirectPage = appServer.whereIs("meta-redirect.html");
121122
missedJsReferencePage = appServer.whereIs("missedJsReference.html");
123+
modernModalPage = appServer.whereIs("modal_dialogs/modern_modal.html");
122124
mouseInteractionPage = appServer.whereIs("mouse_interaction.html");
123125
mouseOverPage = appServer.whereIs("mouseOver.html");
124126
mouseTrackerPage = appServer.whereIs("mousePositionTracker.html");

0 commit comments

Comments
 (0)