用dialog在前台实现一个简单的UI对话框

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>对话框部件(Dialog Widget)演示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>

<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>

</body>
</html>

jquery $.dialog的用法

第一种方法:

 function getApparatusLists()

{   

      var url='${basePath}worklicense/app/getApparatusList.action?;  //链接   

    $.dialog({

        id:'testItem',     

     content:'url:'+url,    //重点,传送参数

       title:'仪器列表:',     

     opacity:0.4,     

     600,    

      height:400,     

     lock:true      });   

第二种方法: 把表单中的值传过去

function tt()
 {
   var df = document.thisForm; 
   df.submit();
  
 }
 function getApparatusLists(){
 
     $.dialog({
     id:'testItem',
     content:tt(),  //把表单的值根据表单提交
     title:'仪器列表:',
     opacity:0.4,
     600, 
     height:400,
     lock:true
     });
   
   }

原文地址:https://www.cnblogs.com/jiangcm/p/7436588.html