Question

我试图在点击按钮上显示一个简单的对话框，该按钮有3个文本框可以从用户那里获取输入，按钮会在点击时将文本框的值存储在某个变量中。在道场我也知道。我尝试了下面提到的dojo代码，但我没有发现它工作。如何使用HTML / jQuery实现同样的目标？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
   <script type="text/javascript" src="layout/dojo/dojo/dojo.js" djConfig="parseOnLoad:true,debugAtAllCosts:true,isDebug: false,gfxRenderer: 'svg,silverlight,canvas,vml'"></script>
<script type="text/javascript" src="layout/dojo/dojox/analytics/plugins/dojo.js" djConfig="parseOnLoad:true,debugAtAllCosts:true,isDebug: false, gfxRenderer: 'svg,silverlight,canvas,vml'"></script>     
     <link rel="stylesheet" id="themeStyles" href="layout/dojo/dijit/themes/claro/claro.css"/>
     <link rel="stylesheet" id="themeStyles" href="layout/dojo/dijit/themes/claro/document.css"/>   
     <link href="layout/css/button.css" rel="stylesheet" type="text/css"/>

        <title>Dojo Dialog Test</title>


<script type="text/javascript">
dojo.require("dojox.grid.cells.dijit");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Dialog");
dojo.require("dojox.widget.Dialog");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Dialog");
dojo.require("dojox.layout.TableContainer");


function createDialog()
{
     dijit.byId('dialog').show(); 
}

function closeDialog()
{
     dijit.byId('dialog').hide(); 
}
 </script>
</head>
<body>
<input type ="button" id="dialog" value="Dialog" onclick="javascript:createDialog();"> 
<div dojoType="dijit.Dialog" id="dialog" title="tested" style="width:60%;height:70%;">
  </div>
</body>
</html>

Answer 1

对于可以输入值的对话框，您可以使用jQuery编写代码来自己生成对话框。但是，当你拥有像jQuery UI或bootstrap这样的框架时，为什么要重新发明轮子。下面是使用HTML 5，jQuery，Bootstrap

的示例

<!DOCTYPE>
<html>
<head>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"  ></script>  
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" ></script>   
    <link rel="stylesheet" id="themeStyles" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/> 
    <title>Bootstrap Dialog Test</title>


    <script type="text/javascript">
        var textbox1 = "";
        var textbox2 = "";
        var textbox3 = "";

        function saveTextBoxes() {
            textbox1 = $("#textbox1").val();
            textbox2 = $("#textbox2").val();
            textbox3 = $("#textbox3").val();
        }
        function alertSavedValues() {
            alert("box 1: " + textbox1 + " box 2: " + textbox2 + " box 3: " + textbox3)
        }

    </script>
</head>
<body>
    <br><br>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch Dialog
    </button><br>
    <br><br>
    <button type="button" class="btn btn-primary" onclick="alertSavedValues()">Text Box values</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Input Form</h4>
                </div>
                <div class="modal-body">
                    Text Box 1 <input type="textbox" id="textbox1"> </input><br>
                    Text Box 2 <input type="textbox" id="textbox2"> </input><br>
                    Text Box 3 <input type="textbox" id="textbox3"> </input><br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveTextBoxes()">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
</html>

显示一个简单的对话框，从JavaScript / jQuery中获取用户的输入？

1 个答案: