Question

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

＆＃13;

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

＆＃13;

  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/

Answer 1

只需创建一个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>

Answer 2

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

https://jsfiddle.net/mm7b7t5t/

打开一个hello world popup：

function keysrt(arr, prop, key, reverse) {
    var sortOrder = 1;
    if(reverse)sortOrder = -1;
    return arr.sort(function(a, b) {
        var x = a[prop][key]; var y = b[prop][key];
        return sortOrder * ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}   


var b = [ 
    { id: 0, last: 'Anne',     data:{title: 'habc'}},
    { id: 1, last: 'Odine',    data:{title: 'asdf'}},
    { id: 2, last: 'Prentice', data:{title: 'tzuio'}}
]

keysrt(b,'data', 'title');

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

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

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

2 个答案: