JavaScript 弹出窗口通过 OnClick 和内联样式

all.

我一直在涉足JavaScript，但我偶然发现了一个我不知道如何解决的问题。我想做的是创建一个链接列表，这些链接有一个固定的小弹出窗口，上面有一条消息。

我做了一个这样的清单：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <li><a href="#">google.com</a></li>
    <li><a href="#">espn.com</a></li>
    <li><a href="#">stackoverflow.com</a></li>
    <li><a href="#">wikipedia.org</a></li>
</body>
</html>

但我不确定该怎么做才能制作一个固定尺寸的弹出屏幕，比如 100x100，它说"你好"。有没有办法通过内联样式和实现 onclick 函数来做到这一点？我之前尝试过使用div 标签、单独的样式表等来执行此操作，但我正在尝试查看是否有其他方法可以做到这一点。

谢谢。

我使用启动框来创建警报：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script>
  $(document).ready(function() {
    $( ".openDialog" ).on( "click", function() {
      bootbox.alert('Hello');
    });
  } );
  </script>
<body>
    <li><a href="#" class="openDialog">google.com</a></li>
    <li><a href="#" class="openDialog">espn.com</a></li>
    <li><a href="#" class="openDialog">stackoverflow.com</a></li>
    <li><a href="#" class="openDialog">wikipedia.org</a></li>
</body>
</html>

我认为您正在寻找window.open()函数。您可以根据需要使用onClick()直接调用它。您还可以完全控制尺寸。

例如，这就是您如何弹出一个 100 x 100 的窗口，其中包含一些内容。

首先，我们打开标题为MsgWindow的窗口window.open("", "MsgWindow", "width=100,height=100");

然后我们将内容放入窗口中。

myWindow.document.write("<p>This is 'MsgWindow'. I am 100px wide and 100px tall!</p>");

这是文档https://www.w3schools.com/jsref/met_win_open.asp

希望有帮助

相关内容

最新更新

热门标签：