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

Posted jiangcm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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,     

     width:600,    

      height:400,     

     lock:true      });   

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

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

以上是关于用dialog在前台实现一个简单的UI对话框的主要内容,如果未能解决你的问题,请参考以下文章

Vue中使用element-ui 给按钮绑定一个单击事件,实现点击按钮就弹出一个dialog对话框

用JS调整jquery UI对话框的大小?

Android之UI--打造12种Dialog对话框

UG二次开发中MFC对话框怎样调用UF_UI_select_with_class_dialog

用jquery-ui的dialog做对话框

UI5-文档-4.19-Reuse Dialogs