jquery模态窗口,jquery 模态框

jquery modal（）是干什么的

特点

自定义动画和定位

自定义模态窗口样式，没有预定义的样式表！.

感谢网友Hero提供的方法

用法

1- HEADER

link href="/component_v1.0/moaModal-master/css/style.css" rel="stylesheet" type="text/css"

script src="/component_v1.0/moaModal-master/js/Sweefty.js" type="text/javascript"/script

script src="/component_v1.0/moaModal-master/js/moaModal.minified.js" type="text/javascript"/script

script src="/component_v1.0/moaModal-master/js/extension.js" type="text/javascript"/script

2- HTML

div id="workbook" class="pf_work"a href="#" class="workbook1"img src="/main_style/img/work_book.jpg"/a/div

div id="workbookQuery" class="block modal2" /div

相关问答

Q1: jquery在网页设计中的作用

Web开发人员每天都使用JavaScript为他们创建的网站带来必要的功能。jQuery提供了一个提供强大功能和灵活性的特殊工具。jQuery是一个JavaScript库，有助于简化和标准化JavaScript代码和HTML元素之间的交互。JavaScript允许网站具有交互性和动态性，jQuery是一种有助于简化流程的工具。

同时JQuery也是一个紧凑，快速且功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。JQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。换句话说，由于JQuery，JavaScript以简化形式呈现。阅读起来相当舒服。

扩展资料：

JQuery的优点

1、易于使用：如果我们将它与标准JavaScript和其他库进行比较，它使用起来既简单又快捷。它由简单的语法组成，并且需要较少的代码行。

2、巨大的库：与其他库相比，它允许您执行大量功能。

3、插件的可用性：可以使用许多预先编写的插件来立即压缩开发过程。这背后的另一个优点是脚本的效率和安全性。

4、综合教程： JQuery网站提供了不言自明的文档和教程，以便在绝对的编程初学者面前进行理解。

5、AJAX支持：它允许我们轻松地开发Ajax模板，Ajax支持更流畅的界面，可以在页面上执行操作，而不需要重新加载整个页面。

6、灵活性：所有浏览器中的契约，是目前最流行的JavaScript库。

Q2: jquery怎样弹出模态窗口，请教！

JQuery本身是没有提供这样的方法的，但JS本身就有这方法：

window.showModalDialog(URL, null, "dialogWidth:330px;dialogHeight:auto;status:no;help:no;resizable:yes;");

Q3: jQuery如何修改模态对话框的内容

head

meta charset="UTF-8"

titleTitle/title

style

.hidden{

display:none;

}

.modal{

position:fixed;

width:500px;

height:300px;

top: 50%;

left: 50%;

margin-left: -200px;

margin-top: -200px;

background-color: white;

z-index:10;

}

.shadow{

position:fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

opacity:0.5;

background-color:black;

z-index: 9;

}

/style

/head

body

input onclick="add()" type="button" value="添加"/

table border="1" width="200px " id="tb"

tr

td target="hostname"1.1.1.1/td

td target="port"80/td

td target="seq"1/td

td

a class="edit"编辑/a | a class="del"删除/a

/td

/tr

tr

td target="hostname"1.1.1.2/td

td target="port"82/td

td target="seq"2/td

td

a id='i2' class="edit"编辑/a | a class="del"删除/a

/td

/tr

tr

td target="hostname"1.1.1.3/td

td target="port"84/td

td target="seq"3/td

td

a class="edit"编辑/a | a class="del"删除/a

/td

/tr

/table

div class="modal hidden"

div id="modal1"

input name="hostname" type="text"/

input name="port" type="text"/

input name="seq" type="text"/

/div

div

input type="button" value="取消"/

input type="button" value="确认" /

/div

/div

div class="shadow hidden"/div

script src="jquery-1.12.4.js"/script

script

function add() {

$('.modal,.shadow').removeClass('hidden');

$('.modal input[value="确认"]').off().on('click',function(){

//我的理解：

var hostname = $("#modal1 input[name='hostname']").val();

var port = $("#modal1 input[name='port']").val();

var seq = $("#modal1 input[name='seq']").val();

var tr = document.createElement('tr');

var td1 = document.createElement('td');

td1.innerHTML = hostname;

td1.setAttribute('target','hostname');

$(tr).append(td1);

// console.log(tr);

var td2 = document.createElement('td');

td2.innerHTML = port;

td2.setAttribute('target','port');

$(tr).append(td2);

var td3 = document.createElement('td');

td3.innerHTML = seq;

td3.setAttribute('target','seq');

$(tr).append(td3);

var td4 = document.createElement('td');

td4.innerHTML = 'a class="edit"编辑/a | a class="del"删除/a';

// $(td4).children('[class="edit"]').attr('onclick','func()'); // 用这种$('.edit').click(function() 绑定click事件，新加的点击编辑没有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){

$(tr).append(td4);

$('#tb').append(tr);

})

}

//点击edit

// $('table').delegate('a','click',function(){ 不能写$('tb') 因为这是table下的a标签添加点击功能，而这个table是固定的。而写成tr，tr是新加入的，这样就找不到a标签

$('table').delegate('a','click',function(){

//点击编辑，出现模态框

$(this).css('color','red');

$('.modal,.shadow').removeClass('hidden');

var tds = $(this).parent().prevAll(); //this：有编辑的a标签；获取到同一个tr下的所有td

//将表格中的值输入到模态框

tds.each(function(){

var val = $(this).attr('target'); //this ：当前td；（作用域，此this不同于上个this） val：当前td的target值

var txt = $(this).text();

$('.modal input[name="' + val + '"]').val(txt); //将内容添加到modal的input框中

})

$('.modal input[value="确认"]').off().on('click',function(){confirm(tds)});

// var host = $(tds[1]).text(); //tds[1] 会变成dom对象

// var port = $(tds[0]).text();

//将选中编辑的对话框的元素放入到input中

// $("input[name='hostname']").val(host);

// $("input[name='port']").val(port);

//点击确认，将修改过得值重新赋值给表格

function confirm(self){

var hostname = $("#modal1 input[name='hostname']").val();

var port = $("#modal1 input[name='port']").val();

var seq = $("#modal1 input[name='seq']").val();

console.log(11111);

self.eq(0).text(seq); // eq(0) 对应的是seq

self.eq(1).text(port);

self.eq(2).text(hostname);

}

})

// 点击删除

// $('.del').click(function() {

// $(this).parent().parent().remove();

// })

//点击取消，去除input框中的内容

$('.modal input[value="取消"]').click(function(){

$(".modal input[type='text']").val("");

$('.modal,.shadow').addClass('hidden');

})

function func() {

//点击编辑，出现模态框

$('.modal,.shadow').removeClass('hidden');

}

/script

/body

/html

Q4: jquery timepicker 在bootstrap中的模态窗口中不能显示年的和月份的下拉框

我现在用的配置：$(".form_time").datetimepicker({

language: 'zh-CN',

weekStart: 1,

autoclose: true,

startView: 2,

minView: 2

});

前端：div class="controls input-append date form_time" style="margin-left: 18px" data-date="" data-date-format="yyyy-mm-dd" data-link-field="startTime" data-link-format="yyyy-mm-dd"

input id="startTime" class="input-small" readonly type="text"

span class="add-on"i class="icon-remove"/i/span

span class="add-on"i class="icon-th"/i/span

/div

这个是可以显示的，你试试