单击按钮时不显示对话框

时间:2017-03-29 09:23:05

标签: javascript php jquery dialog

我的网站上有按钮'货币转换器'。单击它时,应该打开对话框并进行转换。以下是代码:

currency_converter.php



<!DOCTYPE HTML>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
    
        <script>
            $(document).ready(function() {
                $('#openwindow').each(function() {
                    var $link = $(this);
                    var $dialog = $('<div></div>')
                        .load($link.attr('href'))
                        .dialog({
                            autoOpen: false,
                            title: $link.attr('title'),
                            width: 500,
                            height: 300
                        });
    
                    $link.click(function() {
                        $dialog.dialog('open');
    
                        return false;
                    });
                });
            });
        </script>
    
        <script type="text/javascript">
            $(document).ready(function() {
    
                $('#wrapper').dialog({
                    autoOpen: false,
                    title: 'Basic Dialog'
                });
                $('#opener').click(function() {
                    var page = "https://www.google.com/finance/converter";
    
                    var $dialog = $('<div></div>')
                        .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                        .dialog({
                            autoOpen: false,
                            modal: true,
                            height: 250,
                            width: 350,
                            title: "Currency Converter"
                        });
                    $dialog.dialog('open');
                    return false;   
                });
            });
        </script>
    </head>
    <body>
    
    <button id="opener">Currency Converter</button>
    <div id="wrapper">
    
    </div>
    </body>
    </html>
&#13;
&#13;
&#13;

问题是:我的浏览器中没有打开对话框。

任何人都可以帮忙。提前致谢

2 个答案:

答案 0 :(得分:0)

你已经准备好了两次文件,除此之外它应该可以正常工作。

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />

    <script>
        $(document).ready(function() {
            $('#openwindow').each(function() {
                var $link = $(this);
                var $dialog = $('<div></div>')
                    .load($link.attr('href'))
                    .dialog({
                        autoOpen: false,
                        title: $link.attr('title'),
                        width: 500,
                        height: 300
                    });

                $link.click(function() {
                    $dialog.dialog('open');

                    return false;
                });
            });


            $('#wrapper').dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });
            $('#opener').click(function() {
                var page = "https://www.google.com/finance/converter";

                var $dialog = $('<div></div>')
                    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                    .dialog({
                        autoOpen: false,
                        modal: true,
                        height: 250,
                        width: 350,
                        title: "Currency Converter"
                    });
                $dialog.dialog('open');
                return false;   
            });
        });
    </script>
</head>
<body>

<button id="opener">Currency Converter</button>
<div id="wrapper">

</div>
</body>
</html>

答案 1 :(得分:0)