简体   繁体   English

在两个网站之间创建一个弹出窗口

[英]Making a popup window between two websites

On our website we have a link to another page. 在我们的网站上,我们有另一个页面的链接。 This looks like this 看起来像这样

<a href="URL" title="Title" class="thisClass">
  <img src="IMG"  width="20" border="0"/>
</a>

What I want is that when the link is clicked then a popup comes up with ex. 我想要的是,当单击链接时,ex会弹出一个弹出窗口。 this information: “The page you are trying to enter has xx images and can take long time to load. 此信息:“您尝试输入的页面包含xx张图像,可能需要很长时间才能加载。 Are you sure you want to continue” xx is a variable that can be given from the website where the link is present. 您确定要继续吗?xx是一个变量,可以从存在链接的网站上获得。 Then there should of course be an OK and CANCEL button on the popup. 然后,在弹出窗口上当然应该有一个“确定”和“取消”按钮。 If the OK button is clicked then the URL be loaded to the browser, if CANCEL is clicked then nothing should happen (return to original page) 如果单击“确定”按钮,则将URL加载到浏览器中;如果单击“取消”,则什么也不会发生(返回原始页面)

The website is programmed in asp.net c#. 该网站在asp.net c#中编程。

We are not interested in a new webpage, but just a simple javascript popup given the user a warning that due to xx number of images the webpage will be slow to load. 我们对新网页不感兴趣,但只是一个简单的javascript弹出窗口,向用户发出警告,由于xx图片数量导致该网页加载缓慢。

This webpage is used on an intranet site and we like to warn users when they enter a website that we expect will take long time to load. 该网页在Intranet网站上使用,我们希望在用户进入预计会花费较长时间的网站时警告他们。

Take a look at the jQuery UI Dialog ( http://jqueryui.com/dialog/ ) or Twitter's Bootstrap Modal ( http://twitter.github.io/bootstrap/javascript.html#modals ) 看一下jQuery UI对话框( http://jqueryui.com/dialog/ )或Twitter的Bootstrap Modal( http://twitter.github.io/bootstrap/javascript.html#modals

I think the both solutions can do what you need. 我认为这两种解决方案都能满足您的需求。

<a href="URL" title="Title" onclick="return confirm('The page you are trying to enter has xx images and can take long time to load. Are you sure you want to continue?');" class="thisClass">
 <img src="IMG"  width="20" border="0"/>
</a>

If you can do with the regular browsers' alert box, try this. 如果可以使用常规浏览器的警报框,请尝试此操作。 Else you will have to resort to other jquery plugins to make it look more elegant that are mentioned on other answers. 否则,您将不得不求助于其他jquery插件,以使其看起来更加雅致,这在其他答案中已经提到。

You can user JqueryUi for this, this library includes Dialog which corresponds to your need. 您可以为此使用JqueryUi,该库包含与您的需求相对应的Dialog。

This is the website : http://jqueryui.com/dialog/#default 这是网站: http : //jqueryui.com/dialog/#default

And a sample of code that I find in this url : 以及在此url中找到的代码示例:

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>

There is also example to manage confirmation (button OK and button CANCEL) 还有用于管理确认的示例(按钮“确定”和“取消”按钮)

I hope that I help you ;) 希望对您有所帮助;)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM