如何使用jquery创建自定义弹出窗口

how to create custom popup using jquery

本文关键字：窗口 自定义 创建 何使用 jquery      更新时间：2023-09-26

我想使用jquery创建简单的自定义弹出窗口。我的html代码如下。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Thiws should be custom popup");
    });
   
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>

  On clicking button it should open a form in popup asking username, email address and also it should have submit button

作为参考，我想问什么http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/

你可以使用我在这里写的函数和css：

https://jsfiddle.net/mm7b7t5t/

打开你好世界弹出窗口：

var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();

你可以使弹出窗口可拖动，添加多个按钮等

jQuery对话框在我看来是一团糟，我更喜欢我自己的弹出代码^^

只需创建一个html文件并复制/粘贴该代码。

<html>
<head>
<title></title>
</head>
<body>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#OpenDialog").click(function () {
                $("#dialog").dialog({modal: true, height: 400, width: 400 });
            });
        });
    </script>
    <a id="OpenDialog" href="#">Click here to open dialog</a>
    <div id="dialog" title="Dialog Title">
        <p>test</p>
    </div>
</body>
</html>
相关文章：