js弹出窗口+选择

在JavaScript中，弹出窗口通常是通过浏览器的window.open()方法实现的，而选择功能则可以通过HTML的<select>元素或者一些JavaScript库（如jQuery UI的对话框）来实现。下面我会分别解释这两种功能，并提供一些基本的示例代码。

弹出窗口

window.open()方法用于打开一个新的浏览器窗口或标签页。它的基本语法如下：

window.open(URL, windowName, [windowFeatures]);

URL：要在新窗口中加载的页面的URL。
windowName：新窗口的名称。
windowFeatures：可选参数，指定新窗口的特性，如大小、位置、滚动条等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出窗口示例</title>
<script>
function openPopup() {
    window.open('https://www.example.com', 'popupWindow', 'width=600,height=400');
}
</script>
</head>
<body>
<button onclick="openPopup()">打开弹出窗口</button>
</body>
</html>

选择功能

选择功能通常是通过<select>元素实现的，它允许用户从一个预定义的列表中选择一个选项。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择示例</title>
</head>
<body>
<label for="mySelect">选择一个选项：</label>
<select id="mySelect">
    <option value="option1">选项 1</option>
    <option value="option2">选项 2</option>
    <option value="option3">选项 3</option>
</select>
</body>
</html>

如果你想要一个更复杂的对话框，其中包含选择功能，你可以使用JavaScript库，比如jQuery UI的对话框组件。

jQuery UI 对话框示例：

首先，确保引入了jQuery和jQuery UI的CSS和JS文件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI 对话框示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "确定": function() {
                // 获取选择的值
                var selected = $("#mySelect").val();
                alert("你选择了：" + selected);
                $(this).dialog("close");
            },
            "取消": function() {
                $(this).dialog("close");
            }
        }
    });

    $("#openDialogButton").click(function() {
        $("#dialog").dialog("open");
    });
});
</script>
</head>
<body>
<button id="openDialogButton">打开对话框</button>
<div id="dialog" title="选择一个选项">
    <label for="mySelect">选择一个选项：</label>
    <select id="mySelect">
        <option value="option1">选项 1</option>
        <option value="option2">选项 2</option>
        <option value="option3">选项 3</option>
    </select>
</div>
</body>
</html>

在这个示例中，点击按钮会打开一个包含选择框的对话框，用户可以选择一个选项并点击确定来获取选择的值。

如果你遇到了具体的问题或者想要了解更多关于这些功能的细节，请提供更多的上下文或者具体问题，我会尽力提供帮助。

页面内容是否对你有帮助？

有帮助

没帮助

如何从扩展弹出窗口内部检测浏览器屏幕大小

、

该扩展正在使用popup.html和popup.js。window.addEventListener('resize', function(e) window.innerWidth和window.outerWidth最后注意:我使用的是纯js而不是jquery，所以jquery

浏览 15提问于2021-03-02得票数 0

回答已采纳

1回答

在Chrome扩展中获取选定的文本

、、、

但是，只有当从HTML弹出中选择文本时，我的代码才能工作。如果我从一个随机网页中选择一个文本，然后单击"Save“按钮，那么控制台中会打印一个空行。我想当扩展弹出显示时，我的content.js文件无法与网页交互，但我不知道如何解决这个问题。我知道还有其他类似的问题，但我没有尝试过(例如，在不同的.js文件之间传递消息)。" : ["content.js"]}"background":"

浏览 1提问于2021-07-27得票数 4

回答已采纳

1回答

在镁基弹出窗口中，tinymce不工作。

、、、、

我正在尝试使用内联类型Magnific弹出中的来编辑和创建WordPress站点上的帖子。这是一项正在进行的工作；。您可以使用用户名test和密码ukQfQ7zx7akPXH登录。因此，我猜问题是与TinyMCE和Magni显弹出的某种冲突。然而，Chrome中没有出现控制台错误。第二次更新callbacks: { console.log('Popup is

浏览 6提问于2014-09-18得票数 1

1回答

在SilverStripe 2.4.7中使用Javascript

、、

我正在尝试为弹出窗口添加我自己的自定义验证，但奇怪的事情总是发生。当我添加自己的Javascript类时，弹出窗口上的日期选择器停止工作。我不知道为什么，因为我添加的Javascript没有应用于数据选择器。我正在使用 Requirements::javascript('mysite/code/js/jquery.js

浏览 0提问于2012-12-10得票数 1

回答已采纳

1回答

Chrome扩展: ReferenceError：$未定义

、、、

": [ "bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js4.4.1-dist/js/bootstrap.bundle.min.js", "background.js&q

浏览 2提问于2020-09-13得票数 0

回答已采纳

1回答

popup.js什么时候开始启动？

、

default_popup": "offers.html",}, { "notifications", "http://local

浏览 4提问于2015-04-27得票数 1

回答已采纳

1回答

Window.open不与IE7一起使用

、、

当我使用IE 7..is打开弹出窗口时，我正面临着这样的问题<h:commandButton value="Submit" action="#{bean.submit}"> <f:ajax

浏览 1提问于2011-08-30得票数 0

回答已采纳

1回答

如何不再显示弹出窗口(使用现有的库)

、、、

它有自己的弹出窗口设置。我为我的网站建立了一个新的弹出窗口，它要求人们在访问网站时选择语言。在此之前一切都很好，但是当访问者选择语言时，每次页面加载时，他们都会看到弹出窗口。有一个复选框可以打开它，但是当他们选择语言时，我如何也禁用弹出窗口？dismiss"> <label for="dismiss">{{ 'general.newsl

浏览 20提问于2021-11-23得票数 0

2回答

Javascript JSColor在弹出页面上不起作用

我使用颜色选择器来改变颜色，但它在弹出窗口中不起作用。我有一些动态添加的html代码，我想将颜色应用到文本中。如何使用弹出页面应用颜色？

浏览 20提问于2016-07-27得票数 0

2回答

$(e.target).parent('.js_popup-container').length){ 但当页面上有多个弹出窗口时，这就不能很好地工作了，因为如果您单击其他任何地方，包括另一个弹出窗口，当前的弹出窗口应该会关闭，但如果您单击具有相同js_ popup -container类的另一个弹出窗口，则它将保持打开状态，因为从技术上讲，它位于具有该类的元素中。编辑:我知道已经有其他与这个问题非

浏览 65提问于2019-05-25得票数 0

回答已采纳

1回答

在IE9中重新打开jquery datepicker

、

我在IE9中看到了日期选择器的一种行为。日期选择器确实可以工作，但在弹出日历上单击选定的日期后，它会再次弹出。用户必须离开弹出日历才能将其关闭。以下是事件的顺序：2)弹出日历4)在文本框中插入日期，立即弹出日历重新打开。5)用户必须远离日历弹出窗口这在Chrome或FF中是不会发生的。在那里，一旦<em

浏览 0提问于2012-03-21得票数 3

2回答

如何在天使中制作日期和时间选择器？日期和时间应该在同一个界面上吗？

、、、、

我想要角js文件中的日期和时间选择器，当我在文本框中单击时，日期和时间选择器将弹出。在弹出窗口中，我需要同时选择日期和时间。

浏览 6提问于2014-03-10得票数 1

回答已采纳

2回答

如何聚焦bootstrap日期时间选择器？

、

我使用Bootstrap datetime选择器(bootstrap-datetimepicer.min.js)作为代码的一部分。在DIV标签下使用class=“fade fade”，这将打开第一个弹出窗口，现在在第一个弹出窗口中有一个datetime选取器，单击选取器会显示第二个时间弹出窗口，但它是隐藏/未聚焦的。我想将焦点从第一个弹出窗口移动到第二个弹出窗口。我如何才

浏览 1提问于2016-06-04得票数 0

2回答

OpenLayers:使用从外部地图调用添加时无法关闭弹出窗口

、、

我已经写了一个基本的函数，允许我从地图外部的链接显示弹出窗口。打开弹出窗口的功能运行良好，但我无法将其关闭。这里有更多的细节。});map.addControl(select);它工作得很好-我可以打开和关闭弹出窗口; map.addPopup(popup);

浏览 7提问于2012-11-21得票数 4

回答已采纳

2回答

视频主播不适用于新的视频元素

、、、

我正在建立一个网站，其中有一个选项卡式弹出窗口，其中一个选项卡显示视频，其中显示与您选择的项目相关的信息。但是，当您关闭弹出式窗口并打开另一个弹出式窗口时，视频显示为标准HTML 5播放器-没有视频js外观或flash播放器。每当弹出窗口被加载时，我都会加载它(只是以防万一--我从来没有这样做过)： _V_("playa", {controls: true, autoplay: false, pr

浏览 2提问于2013-07-15得票数 1

2回答

如何在重定向到Excel中自动打开的Excel文件后关闭浏览器窗口？

、

我们基本上使用window.open打开一个弹出，它负责轮询服务器，以报告进程状态并等待文档的可用性，并在文档准备就绪时重定向到生成的文档(window.location = THE_URL_OF_THE_FILE在后一种情况下，文档在Excel中成功打开，但导致其打开的窗口将永远停留在那里。我想这与IE和Windows的集成有某种关系.

浏览 10提问于2011-10-11得票数 3

1回答

使引导时间选择器在输入单击时弹出

、、、、

我尝试使用这个创建一个时间选择器我只是有这段代码，不能将一个新的控件添加到图标中 $('.bootstrap-timepicker-widget.dr

浏览 6提问于2016-02-23得票数 0

回答已采纳

1回答

通过代码触发的元素或弹出立即关闭。

、、

当单击以下选择器“labelfor=‘form -field-lampshade_form’”(是表单标签)时，我试图触发弹出。弹出窗口会突然出现并关闭。我尝试通过JS和弹出窗口高级设置中的“”选项来实现这一点，两者都有相同的结果；弹出实际上只是一个闪烁。JS jQuery("label[for='form-field-lampshade_shape']").click(function() {

浏览 6提问于2021-04-20得票数 1

回答已采纳

1回答

无法打开jqModal弹出窗口

、

在表单提交时，我执行一些验证，并允许用户选择在jqModal弹出窗口中显示的选项。我用于jqm弹出窗口的JS脚本是： $(document).ready(function() {href="#" class="button-x jqmClose">

浏览 3提问于2014-05-08得票数 0

3回答

堆叠的HTML弹出窗口的可见性

、、

我正在开发一个jQuery Backbone.js web应用程序。如果用户选择一个表条目，则会显示一个模式弹出窗口。为了向用户显示弹出窗口现在处于模式模式，我使用了jQuery UI对角条纹(ui-widget-overlay)。但我改成了另一种选择。这些条纹对我来说太“醒目”、“引人注目”了。现在的问题是，我在弹出窗口中有弹出窗口。如果我还更

浏览 0提问于2012-11-15得票数 1

回答已采纳

点击加载更多