我有一个用户填写表单的页面.多个文本框,下拉列表和复选框等.
当用户点击页面中的特定文本框时,我需要使屏幕变暗并弹出一个对话框列表,其中包含复选框和“确定”和“取消”按钮.当用户单击“确定”时,它将从选中的复选框中获取文本值,关闭弹出窗口,再次使主页变亮,并将复选框文本写入以逗号分隔的字符串格式单击的文本框中.
我遇到的最大问题是使用模态弹出div代码.我确定我可以很好地找出复选框/文本框功能,但我无法让弹出窗口正常工作.
有没有人有这样做的简单方法？目前,在我开始搞乱之前,我只有一个包含所有输入控件的简单表单.
解决方法
使用模态对话框,如图
here所示：
<!doctype html> <html lang="en"> <head> <Meta charset="utf-8" /> <title>jQuery UI Dialog - Modal confirmation</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false,height:140,modal: true,buttons: { "Delete all items": function() { $( this ).dialog( "close" ); },Cancel: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-confirm" title="Empty the recycle bin?"> <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"> </span>These items will be permanently deleted and cannot be recovered. Are you sure? </p> </div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum,enim faucibus aliquet rhoncus,arcu felis ultricies neque,sit amet auctor elit eros a lectus.</p> </body> </html>
