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

时间:2018-03-13 03:25:42

标签: javascript hyperlink styles

所有。

我一直在尝试使用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标签,单独的样式表等等,但我试图看看是否有其他方法可以做到这一点。

谢谢。

2 个答案:

答案 0 :(得分:0)

我使用启动框创建警报:

<!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>

答案 1 :(得分:0)

我认为您正在寻找onClick()功能。您可以根据要求使用window.open("", "MsgWindow", "width=100,height=100");直接拨打电话。您还可以完全控制尺寸。

例如,这就是你如何制作一个100 x 100的窗口,里面有一些内容。

首先我们打开标题为MsgWindow myWindow.document.write("<p>This is 'MsgWindow'. I am 100px wide and 100px tall!</p>");

的窗口

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

<header class="forewords"><h1>Lorem some</h1>
</header>

<div class="wrapper">
 <section class="project" id="item1">this is section 1</section>
 <section class="project" id="item2">this is section 2</section>
 <section class="project" id="item3">this is section 3</section>
</div>

<footer class="endings"><h1>Lorem something.</h1>
</footer>

这是文档 onShow()

希望有所帮助