Heim Web-Frontend js-Tutorial 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

May 16, 2016 pm 06:29 PM
弹出框 百度

脚本之家之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图:
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

原有百度的Popup.js在有

复制代码 代码如下:

声明的网页下存在兼容性问题,即在IE6,7,8下,遮罩层是可以全屏,但在Firefox和Chrome下无法全屏遮罩。
  造成遮罩层在FF和Chrome下无法全屏的问题在267行:
复制代码 代码如下:
var C = '
';

遮罩层dialogBoxBG 的style只是单纯的设置为height:100%,所以在有..>声明下的页面无法兼容FF和Chrome。
然而目前网上有一个“luocheng”的“完美版”popup.js,下载下来试用了下,结果并没有完全兼容FF和Chrome,还是存在遮罩层无法全屏的bug,读了一下源代码,找到了错误所在:luocheng的版本中增加了一个getValue方法,switch语句中的case "clientHeight":竟然有两个!删掉一个以后继续测试,还是无法兼容FF和Chrome,继续读代码排错,增加的setBackgroundSize方法中G('dialogBoxBG').style.height = getValueHeight;只是复制给遮罩层dialogBoxBG的height=整数值,这个是不遵循web标准的,所以在FF和Chrome下存在bug。
复制代码 代码如下:

setBackgroundSize: function() {
var getValueWidth;
var getMaxValueWidth = [getValue("clientWidth"), getValue("scrollWidth")];
getValueWidth = eval("Math.max(" + getMaxValueWidth.toString() + ")");
G('dialogBoxBG').style.width = getValueWidth;
var getValueHeight;
var getMaxValueHeight = [getValue("clientHeight"), getValue("scrollHeight")];
getValueHeight = eval("Math.max(" + getMaxValueHeight.toString() + ")");
G('dialogBoxBG').style.height = getValueHeight; },

解决方法很简单:G('dialogBoxBG').style.height = getValueHeight;修改成G('dialogBoxBG').style.height = getValueHeight + "px";即可。
所以大家以后在开发过程中,注意对于宽度与高度最好加上'px';这样的单位。

令附上获取页面高度在不同浏览器之间的差异参考资料:
  clientHeight:在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度;
  scrollHeight:在IE下,scrollHeight 是页面实际内容的高度,可以小于clientHeight;在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight。
/*******************************************************/
拓展方法:
1.弹出确认框回调执行服务器端方法
复制代码 代码如下:

function ShowConfirm(title, content, target) //显示确认对话框
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content);
pop.setContent("callBack", ShowCallBackServer); //回调函数
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: pop
});
pop.build();
pop.show();
popp = pop;
return false;
}
//执行服务器端方法,即进行__doPostBack('','')操作
function ShowCallBackServer(para) {
var str = para["str"];
if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
//alert(str);
__doPostBack(str, '');
}
}
ClosePop();
}
//遍历页面中的Button名称
function GetEachBtnName(obj) {
return obj.name == '' || obj.name == null ? obj.id : obj.name;
}

使用方法:
  在一个有OnClick="btnTest_Click" 的Button控件上注册OnClientClick为return ShowConfirm(' ','是否确定删除?',this)。
完整代码:
复制代码 代码如下:

2.在iframe中使用popup.js
我们在一个页面中内嵌了一个iframe,想让iframe中弹出的对话框或者确认框在父页面中弹出来,实现遮罩层全屏而不是只是在iframe页面中全屏,然后确认后执行回调操作iframe,可以是执行iframe中的服务器端方法。
复制代码 代码如下:

function ShowConfirmIFrame(title, content, target) //显示确认对话框
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content);
pop.setContent("callBack", ShowIFrame); //回调函数
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: pop
});
temp = target;
pop.build();
pop.show();
popp = pop;
return false;
}
var temp;
function ShowIFrame() {
parent.frames["content"].window.ShowCallBackServerIFrame(temp);
// parent.window.iframe.ShowCallBackServer();
}
function ShowCallBackServerIFrame(para) {
var str = para;
if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
__doPostBack(str, '');
}
}
closeWin();
}

使用方法:
iframe中定义js方法:
复制代码 代码如下:

   //删除
function subDel(obj)
{
return parent.parentDel(obj);
}

Button按钮控件注册OnClientClick事件:
复制代码 代码如下:

父页面定义js方法:
复制代码 代码如下:

function parentDel(obj)
{
return ShowConfirmIFrame('删除','是否确定删除?',obj);
}

popup.js进化版与普通修正版下载  原版也修正了上面所说的并没有完全兼容FF和Chrome的问题。
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Nach 2 Monaten kann der humanoide Roboter Walker S Kleidung falten Nach 2 Monaten kann der humanoide Roboter Walker S Kleidung falten Apr 03, 2024 am 08:01 AM

Herausgeber des Machine Power Report: Wu Xin Die heimische Version des humanoiden Roboters + eines großen Modellteams hat zum ersten Mal die Betriebsaufgabe komplexer flexibler Materialien wie das Falten von Kleidung abgeschlossen. Mit der Enthüllung von Figure01, das das multimodale große Modell von OpenAI integriert, haben die damit verbundenen Fortschritte inländischer Kollegen Aufmerksamkeit erregt. Erst gestern veröffentlichte UBTECH, Chinas „größter Bestand an humanoiden Robotern“, die erste Demo des humanoiden Roboters WalkerS, der tief in das große Modell von Baidu Wenxin integriert ist und einige interessante neue Funktionen aufweist. Jetzt sieht WalkerS, gesegnet mit Baidu Wenxins großen Modellfähigkeiten, so aus. Wie Figure01 bewegt sich WalkerS nicht umher, sondern steht hinter einem Schreibtisch, um eine Reihe von Aufgaben zu erledigen. Es kann menschlichen Befehlen folgen und Kleidung falten

Baidu Apollo bringt Apollo ADFM auf den Markt, das weltweit erste große Modell, das autonomes Fahren der Stufe L4 unterstützt Baidu Apollo bringt Apollo ADFM auf den Markt, das weltweit erste große Modell, das autonomes Fahren der Stufe L4 unterstützt Jun 04, 2024 pm 08:01 PM

Am 15. Mai veranstaltete Baidu Apollo den Apollo Day 2024 im Wuhan Baidu Carrot Auto Robot Zhixing Valley und demonstrierte umfassend Baidus große Fortschritte beim autonomen Fahren in den letzten zehn Jahren, die auf großen Modellen basierende Technologiesprünge und eine neue Definition der Passagiersicherheit mit sich brachten Baidu, das weltweit größte autonome Fahrzeugbetriebsnetzwerk, hat autonomes Fahren sicherer gemacht als menschliches Fahren. Dadurch werden sicherere, komfortablere, umweltfreundlichere und kohlenstoffärmere Reisemethoden vom Ideal zur Realität. Wang Yunpeng, Vizepräsident der Baidu Group und Präsident der Intelligent Driving Business Group, sagte vor Ort: „Unsere ursprüngliche Absicht, autonome Fahrzeuge zu bauen, besteht darin, den wachsenden Wunsch der Menschen nach besserem Reisen zu befriedigen. Die Zufriedenheit der Menschen ist unsere treibende Kraft. Denn Sicherheit, So schön, wir freuen uns, es zu sehen

Einführung in den Erhalt von Baidu-Xiyang-Muscheln Einführung in den Erhalt von Baidu-Xiyang-Muscheln Mar 28, 2024 am 09:11 AM

Es gibt viele Benutzer in Xirang, die nicht wissen, wo die Muscheln sind und wie sie sie bekommen können. Einige Spieler haben mehrere Stunden lang gesucht, können sie aber immer noch nicht finden. Nachfolgend erfahren Sie, wie Sie Baidu-Xirang-Muscheln erhalten . Kommen Sie vorbei. So erhalten Sie Baidu Xirang Shell 1. Zuerst müssen wir zur Community und dann zum Ort im Bild unten kommen. 2. Wählen Sie hier das Ziel aus und betreten Sie die 188. Etage. 3. Nachdem Sie die 188. Etage betreten haben, sehen Sie diese Aufforderung, wenn Sie herumlaufen. Klicken Sie einfach auf „I Got It“. 4. Der Standort der Muschel ist möglicherweise etwas schwierig zu finden. Direkt hinter dem Aufzug 188 befindet sich ein kleiner leuchtender Punkt, bei dem es sich um die Muschel handelt. 5. Sie müssen einen VR-Controller verwenden, um Muscheln aufzunehmen. Klicken Sie einfach auf die Muschel. Einlösungsmethode 1. Klicken Sie zunächst auf das Symbol „Einstellungen“ in der oberen rechten Ecke der Seite und wählen Sie „

Deepseek Web Version Eingang Deepseek Offizielle Website Eingang Deepseek Web Version Eingang Deepseek Offizielle Website Eingang Feb 19, 2025 pm 04:54 PM

Deepseek ist ein leistungsstarkes Intelligent -Such- und Analyse -Tool, das zwei Zugriffsmethoden bietet: Webversion und offizielle Website. Die Webversion ist bequem und effizient und kann ohne Installation verwendet werden. Unabhängig davon, ob Einzelpersonen oder Unternehmensnutzer, können sie massive Daten über Deepseek problemlos erhalten und analysieren, um die Arbeitseffizienz zu verbessern, die Entscheidungsfindung zu unterstützen und Innovationen zu fördern.

Baidu Robin Li leitete ein Team, das PetroChina besuchte, um die Erkenntnisse der Öl- und Gasindustrie zu besprechen Baidu Robin Li leitete ein Team, das PetroChina besuchte, um die Erkenntnisse der Öl- und Gasindustrie zu besprechen May 07, 2024 pm 06:13 PM

Laut Nachrichten dieser Website vom 7. Mai besuchte Robin Li, Gründer, Vorsitzender und CEO von Baidu, am 6. Mai mit einem Team die China National Petroleum Corporation (im Folgenden als „PetroChina“ bezeichnet) in Peking und traf sich mit Direktoren von Dai Houliang, Vorsitzender der China National Petroleum Corporation und Parteisekretär, führte Gespräche. Die beiden Parteien führten einen intensiven Austausch über die Stärkung der Zusammenarbeit und die Förderung der tiefen Integration der Energiewirtschaft mit digitaler Intelligenz. PetroChina wird den Aufbau einer digitalen China Petroleum Corporation beschleunigen, die Zusammenarbeit mit der Baidu Group stärken, die tiefgreifende Integration der Energiewirtschaft mit digitaler Intelligenz fördern und einen größeren Beitrag zur Gewährleistung der nationalen Energiesicherheit leisten. Robin Li sagte, dass die „intelligente Emergenz“ und die Kernfähigkeiten des Verstehens, der Generierung, der Logik und des Gedächtnisses, die große Modelle zeigen, einen größeren Raum für die Vorstellungskraft für die Kombination von Spitzentechnologie und Öl- und Gasgeschäft eröffnet hätten. Stets

Es wird berichtet, dass die chinesische Version des Mobiltelefons „Search in Circle' der Samsung Galaxy S24-Serie die Google-Suche unterstützen wird Es wird berichtet, dass die chinesische Version des Mobiltelefons „Search in Circle' der Samsung Galaxy S24-Serie die Google-Suche unterstützen wird Jun 01, 2024 am 09:54 AM

Laut Nachrichten vom 31. Mai verbreitete der Blogger @ibinguniverse heute die Nachricht, dass die chinesische Version des Mobiltelefons „Search in Circle“ der Samsung Galaxy S24-Serie die Google-Suche unterstützen wird. Den konkreten Startzeitpunkt gab der Blogger nicht bekannt. Laut der vorherigen Einführung von Samsung wurde die Samsung Galaxy S24-Serie mit vielen hochrangigen KI-Funktionen, KI-basierten praktischen Funktionen wie Eingabe, Übersetzung, Rekorder, Notizen und Kameras ausgestattet, um Benutzern ein bequemeres und effizienteres Gesamterlebnis zu bieten Erfahrung. Anders als bei der Überseeversion werden die meisten KI-Funktionen der Samsung Galaxy S24-Serie von inländischen Herstellern wie Baidu bereitgestellt. Wie bereits berichtet, integriert Galaxy AI mehrere Funktionen des großen Baidu Wenxin-Modells umfassend, wodurch endseitige Anruf- und Übersetzungsfunktionen sowie intelligente Zusammenfassungen durch generative KI bereitgestellt werden können.

Empfehlung für ein KI-Tool Empfehlung für ein KI-Tool Nov 29, 2024 am 11:08 AM

In diesem Artikel werden sechs beliebte KI-Tools vorgestellt, darunter Douyin Doubao, Wenxin Yige, Tencent Zhiying, Baidu Feipiao EasyDL, Baidu AI Studio und iFlytek Spark Cognitive Large Model. Diese Tools decken verschiedene Funktionen wie Texterstellung, Bildgenerierung, Videobearbeitung und KI-Modellentwicklung ab. Bei der Auswahl des richtigen KI-Tools müssen Faktoren wie funktionale Anforderungen, technisches Niveau und Kostenbudget berücksichtigt werden. Diese Tools bieten praktische und effiziente Lösungen für Einzelpersonen und Unternehmen, die KI-Unterstützung benötigen.

Ein weiteres nationales Produkt aus Baidu ist mit Deepseek verbunden. Ein weiteres nationales Produkt aus Baidu ist mit Deepseek verbunden. Mar 12, 2025 pm 01:48 PM

Deepseek-R1 ermöglicht die Baidu-Bibliothek und NetDisk: Die perfekte Integration von Deep Thinking and Action hat sich in nur einem Monat schnell in viele Plattformen integriert. Mit seinem kühnen strategischen Layout integriert Baidu Deepseek als Modellpartner von Drittanbietern und in sein Ökosystem, das einen großen Fortschritt in seiner ökologischen Strategie der "großen Modellsuche" erzielt. Baidu Search und Wenxin Intelligent Intelligent Platform sind die ersten, die sich mit den Deep -Suchfunktionen von Deepseek und Wenxin Big Models verbinden und den Benutzern ein kostenloses KI -Sucherlebnis bieten. Gleichzeitig integriert der klassische Slogan von "Sie werden wissen, wenn Sie zu Baidu gehen", und die neue Version der Baidu -App integriert auch die Funktionen von Wenxins großem Modell und Deepseek, wobei die "AI -Suche" und "breite Netzwerkinformationsförderung" gestartet wird.

See all articles