Отображение простого диалогового окна, которое принимает данные от пользователя в JavaScript / jQuery?

Question

Отображение простого диалогового окна, которое принимает данные от пользователя в JavaScript / jQuery?

0

Я пытаюсь отобразить простое диалоговое окно одним нажатием кнопки, которое будет иметь 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>

sTg 29 нояб. 2013, в 16:05

Источник

Теги:

javascript

jquery

html

dojo

1 ответ

Ещё вопросы

Vasu · Accepted Answer · 2013-11-29T17-27-00.000Z

Для диалогового окна, в котором вы можете вводить значения, вы можете написать код, используя 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>