10/10/2018, 13:28

Giúp em tạo hộp thoại popup thông báo

Mọi người giúp em cách tạo một hộp thoại hiển thị giữa màn hình thông báo một vấn đề nào đó. Tránh cho người thực hiện bất cứ thao tác nào. Và có 2 nút ấn là "tiếp tục đọc" và tiếp sau đó là các hộp thoại tiếp theo. Hoặc "Thoát" để trở lại trang đang xem. Em xin cảm ơn!!
ltnhuan viết 15:30 ngày 10/10/2018
Javascript common.js: function OpenWindow(url)
{
var w = (window.screen.width/2) - 400;
var onFocusObj = window.open(url, "_blank", 'toolbar=no,location=no,directories=no,status=no,m enubar=no,scrollbars=yes,resizable=yes,copyhistory =no, width=700,height=600,left='+w+', top=80,screenX='+w+'px,screenY=80px');
onFocusObj.focus();
return false;
}

function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

function getInnerSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [ myWidth, myHeight ];
}

function GetCenteredXY(w, h) {
var ps = getScrollXY();
var sz = getInnerSize();
var Left = (sz[0] - w) / 2 + ps[0];
var Top = (sz[1] - h) / 2 + ps[1];
return [ Math.ceil(Left), Math.ceil(Top) ];
}

/**
* FlashObject v1.2.3: Flash detection and embed - http://blog.deconcept.com/flashobject/
*
* FlashObject is (c) 2005 Geoff Stearns and is released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*/
if(typeof com == "undefined") var com = new Object();
if(typeof com.deconcept == "undefined") com.deconcept = new Object();
if(typeof com.deconcept.util == "undefined") com.deconcept.util = new Object();
if(typeof com.deconcept.FlashObjectUtil == "undefined") com.deconcept.FlashObjectUtil = new Object();
com.deconcept.FlashObject = function(swf, id, w, h, ver, c, useExpressInstall, quality, redirectUrl, detectKey){
this.DETECT_KEY = detectKey ? detectKey : 'detectflash';
this.skipDetect = com.deconcept.util.getRequestParameter(this.DETECT _KEY);
this.params = new Object();
this.variables = new Object();
this.attributes = new Array();

if(swf) this.setAttribute('swf', swf);
if(id) this.setAttribute('id', id);
if(w) this.setAttribute('width', w);
if(h) this.setAttribute('height', h);
if(ver) this.setAttribute('version', new com.deconcept.PlayerVersion(ver.toString().split(" .")));
if(c) this.addParam('bgcolor', c);
var q = quality ? quality : 'high';
this.addParam('quality', q);
this.setAttribute('redirectUrl', '');
if(redirectUrl) this.setAttribute('redirectUrl', redirectUrl);
if(useExpressInstall) {
// check to see if we need to do an express install
var expressInstallReqVer = new com.deconcept.PlayerVersion([6,0,65]);
var installedVer = com.deconcept.FlashObjectUtil.getPlayerVersion();
if (installedVer.versionIsValid(expressInstallReqVer) && !installedVer.versionIsValid(this.getAttribute('ve rsion'))) {
this.setAttribute('doExpressInstall', true);
}
} else {
this.setAttribute('doExpressInstall', false);
}
}
com.deconcept.FlashObject.prototype.setAttribute = function(name, value){
this.attributes[name] = value;
}
com.deconcept.FlashObject.prototype.getAttribute = function(name){
return this.attributes[name];
}
com.deconcept.FlashObject.prototype.getAttributes = function(){
return this.attributes;
}
com.deconcept.FlashObject.prototype.addParam = function(name, value){
this.params[name] = value;
}
com.deconcept.FlashObject.prototype.getParams = function(){
return this.params;
}
com.deconcept.FlashObject.prototype.getParam = function(name){
return this.params[name];
}
com.deconcept.FlashObject.prototype.addVariable = function(name, value){
this.variables[name] = value;
}
com.deconcept.FlashObject.prototype.getVariable = function(name){
return this.variables[name];
}
com.deconcept.FlashObject.prototype.getVariables = function(){
return this.variables;
}
com.deconcept.FlashObject.prototype.getParamTags = function(){
var paramTags = ""; var key; var params = this.getParams();
for(key in params) {
paramTags += '<param name="' + key + '" value="' + params[key] + '" />';
}
return paramTags;
}
com.deconcept.FlashObject.prototype.getVariablePai rs = function(){
var variablePairs = new Array();
var key;
var variables = this.getVariables();
for(key in variables){
variablePairs.push(key +"="+ variables[key]);
}
return variablePairs;
}
com.deconcept.FlashObject.prototype.getHTML = function() {
var flashHTML = "";
if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture
if (this.getAttribute("doExpressInstall")) { this.addVariable("MMplayerType", "PlugIn"); }
flashHTML += '<embed wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" id="'+ this.getAttribute('id') + '" name="'+ this.getAttribute('id') +'"';
var params = this.getParams();
for(var key in params){ flashHTML += ' '+ key +'="'+ params[key] +'"'; }
pairs = this.getVariablePairs().join("&");
if (pairs.length > 0){ flashHTML += ' flashvars="'+ pairs +'"'; }
flashHTML += '></embed>';
} else { // PC IE
if (this.getAttribute("doExpressInstall")) { this.addVariable("MMplayerType", "ActiveX"); }
flashHTML += '<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" id="'+ this.getAttribute('id') +'">';
flashHTML += '<param name="movie" value="' + this.getAttribute('swf') + '" />';
var tags = this.getParamTags();
if(tags.length > 0){ flashHTML += tags; }
var pairs = this.getVariablePairs().join("&");
if(pairs.length > 0){ flashHTML += '<param name="flashvars" value="'+ pairs +'" />'; }
flashHTML += '<embed wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"';
flashHTML += 'type="application/x-shockwave-flash" width="1" height="1"></embed>';
flashHTML += '</object>';
}
return flashHTML;
}
com.deconcept.FlashObject.prototype.write = function(elementId){
if(this.skipDetect || this.getAttribute('doExpressInstall') || com.deconcept.FlashObjectUtil.getPlayerVersion().v ersionIsValid(this.getAttribute('version'))){
if(document.getElementById){
if (this.getAttribute('doExpressInstall')) {
this.addVariable("MMredirectURL", escape(window.location));
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
this.addVariable("MMdoctitle", document.title);
}
document.getElementById(elementId).innerHTML = this.getHTML();
}
}else{
document.getElementById(elementId).innerHTML = this.getHTML();
if(this.getAttribute('redirectUrl') != "") {
document.location.replace(this.getAttribute('redir ectUrl'));
}
}
}
/* ---- detection functions ---- */
com.deconcept.FlashObjectUtil.getPlayerVersion = function(){
var PlayerVersion = new com.deconcept.PlayerVersion(0,0,0);
if(navigator.plugins && navigator.mimeTypes.length){
var x = navigator.plugins["Shockwave Flash"];
if(x && x.description) {
PlayerVersion = new com.deconcept.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split("."));
}
}else if (window.ActiveXObject){
try {
var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
PlayerVersion = new com.deconcept.PlayerVersion(axo.GetVariable("$vers ion").split(" ")[1].split(","));
} catch (e) {}
}
return PlayerVersion;
}
com.deconcept.PlayerVersion = function(arrVersion){
this.major = parseInt(arrVersion[0]) || 0;
this.minor = parseInt(arrVersion[1]) || 0;
this.rev = parseInt(arrVersion[2]) || 0;
}
com.deconcept.PlayerVersion.prototype.versionIsVal id = function(fv){
if(this.major < fv.major) return false;
if(this.major > fv.major) return true;
if(this.minor < fv.minor) return false;
if(this.minor > fv.minor) return true;
if(this.rev < fv.rev) return false;
return true;
}
/* ---- get value of query string param ---- */
com.deconcept.util.getRequestParameter = function(param){
var q = document.location.search || document.location.href.hash;
if(q){
var startIndex = q.indexOf(param +"=");
var endIndex = (q.indexOf("&", startIndex) > -1) ? q.indexOf("&", startIndex) : q.length;
if (q.length > 1 && startIndex > -1) {
return q.substring(q.indexOf("=", startIndex)+1, endIndex);
}
}
return "";
}

/* add Array.push if needed (ie5) */
if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }}

/* add some aliases for ease of use / backwards compatibility */
var getQueryParamValue = com.deconcept.util.getRequestParameter;
var FlashObject = com.deconcept.FlashObject;

function ChangeImage(obj)
{
if(obj.src.indexOf('s.gif') < 0)
obj.src = obj.src.replace(".gif", "s.gif");
}

function ChangeImageOut(obj)
{
obj.src = obj.src.replace("s.gif", ".gif");
}

function GetContentHTML(target, strURL, d){
AjaxRequest.get(
{
'url':strURL
,'onLoading':function() { target.innerHTML = "<table cellspacing=0 cellpadding=3 border=0 width=100% ><tr><td colspan=4 ><div style='float:left; padding-top:3px;'>Tên miền <b>" + d + "</b>:</div><div><img src='/web/Imgs/ld.gif' /></div></td></tr></table>" }
,'onSuccess':function(req){
target.innerHTML = "";
if(req.responseText == "False")
{
target.innerHTML += "<table cellspacing=0 cellpadding=3 border=0 width=100% style='background-color:#f4f4f4;' ><tr><td width=5% align=center ><input type=checkbox name=Domain id=Domain value='" + d +"|dangky' /></td><td width=30% >" + d + "</td><td width=5% align=center ><img src='/web/Imgs/TR.gif' ></td><td> Chưa có ai đăng ký</td></tr></table>";
}
else
{
target.innerHTML += "<table cellspacing=0 cellpadding=3 border=0 width=100% ><tr><td width=5% align=center ><input type=checkbox name='Domain' id='Domain' value='" + d +"|giahan' /></td><td width=30% ><span class='DM'>" + d + " </span> </td><td width=5% align=center ><img src='/web/Imgs/FA.gif' ></td><td><a target='_blank' class='Inf' onclick='OpenWin(\"" + d + "\",this);'> Xem thông tin</a></td></tr></table>";
}
}
,'onError':function(req){ target.innerHTML = "<table cellspacing=0 cellpadding=3 border=0 width=100% ><tr><td colspan=4 ><b>" + d + "</b> Lỗi kết nối với máy chủ</td></tr></table>" ;}
}
);
}

function GetContent(d, e, obj)
{
GetContentHTML(obj, "Domain.ashx?d=" + d + "&e=" + e, d);
}

function GetContentDomain(target, strURL){
AjaxRequest.get(
{
'url':strURL
,'onLoading':function() { target.innerHTML = "<div style='padding-left:290; padding-top:240;'><img src='Web/Imgs/loading.gif' /></div>"; }
,'onSuccess':function(req){ target.innerHTML = req.responseText; }
,'onError':function(req){ target.innerHTML = "Lỗi kết nối với máy chủ" ;}
}
);
}

function showex(obj)
{
var oj = document.getElementById(obj);
if (oj.style.display == '')
oj.style.display = 'none';
else
oj.style.display = '';
}

function HelpClick(obj)
{
var oj = document.getElementById(obj);
window.location = "/Contact.aspx?email=" + oj.options[oj.selectedIndex].value;
}

function PerChk_onclick(obj, obj1)
{
document.getElementById("PerChk").style.display = '';
document.getElementById(obj).style.display = '';

document.getElementById("BizChk").style.display = 'none';
document.getElementById(obj1).style.display = 'none';
}

function BizChk_onclick(obj, obj1)
{
document.getElementById("PerChk").style.display = 'none';
document.getElementById(obj).style.display = 'none';

document.getElementById("BizChk").style.display = '';
document.getElementById(obj1).style.display = '';
}

function checkFormData(ob) {
var f = document.getElementById(ob);
var d = f.value.toLowerCase().trim();
if (d.length < 2) {
alert('Bạn phải nhập tên miền muốn đăng ký (ít nhất 2 ký tự không bao gồm phần mở rộng).');
return false;
}

var re = /^[0-9a-z\-]+$/g
var msg = 'Tên miền chỉ bao gồm các ký tự A-Z, 0-9 và dấu trừ (-)';
if (!re.test(d)) {
alert(msg);
return false;
}

if (d.indexOf('--')!=-1) {
alert(msg);
return false;
}

if (d.lastIndexOf('-')==d.length-1) {
alert(msg);
return false;
}

if (d.indexOf('-')==0) {
alert(msg);
return false;
}

return true;
}

function OpenWin(domain, obj)
{
var Whois = document.getElementById("Whois");
Whois.style.display = '';

var ps = GetCenteredXY(0,0);
var Left = ps[0] - 300;
var Top = ps[1] - 250;
Whois.style.left = Left + "px";
Whois.style.top = Top + "px";
GetContentDomain(Whois, "RWhois.aspx?Domain=" + domain);
}

function OpenWinPromotion()
{
var Promotion = document.getElementById("Promotion");
Promotion.style.display = '';

var ps = GetCenteredXY(0,0);
var Left = ps[0] - 305;
var Top = ps[1] - 160;
Promotion.style.left = Left + "px";
Promotion.style.top = Top + "px";
}

function HideDomain()
{
var Whois = document.getElementById("Whois");
Whois.style.display = 'none';
}

function HidePromotion()
{
var Promotion = document.getElementById("Promotion");
Promotion.style.display = 'none';
}

function ShowContent(i, obj)
{
var ph1 = document.getElementById("ph1");
var ph2 = document.getElementById("ph2");
var ph3 = document.getElementById("ph3");
var ph4 = document.getElementById("ph4");

var h1 = document.getElementById("h1");
var h2 = document.getElementById("h2");
var h3 = document.getElementById("h3");
var h4 = document.getElementById("h4");

ph1.style.display = 'none';
ph2.style.display = 'none';
ph3.style.display = 'none';
ph4.style.display = 'none';

h1.src = '/Web/Imgs/kd.gif';
h2.src = '/Web/Imgs/kt.gif';
h3.src = '/Web/Imgs/cl.gif';
h4.src = '/Web/Imgs/gy.gif';

if(i==1)
{
ph1.style.display = '';
obj.src = '/Web/Imgs/kds.gif';
}

if(i==2)
{
ph2.style.display = '';
obj.src = '/Web/Imgs/kts.gif';
}

if(i==3)
{
ph3.style.display = '';
obj.src = '/Web/Imgs/cls.gif';
}

if(i==4)
{
ph4.style.display = '';
obj.src = '/Web/Imgs/gys.gif';
}
}

function ShowContent1(i, obj)
{
var ph1 = document.getElementById("ph1");
var ph2 = document.getElementById("ph2");
var ph3 = document.getElementById("ph3");
var ph4 = document.getElementById("ph4");

var h1 = document.getElementById("h1");
var h2 = document.getElementById("h2");
var h3 = document.getElementById("h3");
var h4 = document.getElementById("h4");

ph1.style.display = 'none';
ph2.style.display = 'none';
ph3.style.display = 'none';
ph4.style.display = 'none';

h1.src = '/Web/Imgs/kd1.gif';
h2.src = '/Web/Imgs/kt1.gif';
h3.src = '/Web/Imgs/cl1.gif';
h4.src = '/Web/Imgs/gy1.gif';

if(i==1)
{
ph1.style.display = '';
obj.src = '/Web/Imgs/kd1s.gif';
}

if(i==2)
{
ph2.style.display = '';
obj.src = '/Web/Imgs/kt1s.gif';
}

if(i==3)
{
ph3.style.display = '';
obj.src = '/Web/Imgs/cl1s.gif';
}

if(i==4)
{
ph4.style.display = '';
obj.src = '/Web/Imgs/gy1s.gif';
}
}

function HiddenContent(i, obj)
{
var ph1 = document.getElementById("ph1");
var ph2 = document.getElementById("ph2");
var ph3 = document.getElementById("ph3");
var ph4 = document.getElementById("ph4");

if(i==1)
{
ph1.style.display = 'none';
obj.src = '/Web/Imgs/kd1.gif';
}

if(i==2)
{
ph2.style.display = 'none';
obj.src = '/Web/Imgs/kt1.gif';
}

if(i==3)
{
ph3.style.display = 'none';
obj.src = '/Web/Imgs/cl1.gif';
}

if(i==4)
{
ph4.style.display = 'none';
obj.src = '/Web/Imgs/gy1.gif';
}
}
Css common.css:body{background: #eee}
#Promotion
{
position:absolute;
overflow:hidden;
z-index:10;
background: url(bg_popup.gif) repeat-x;
margin-left:0px;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
border-right:2px solid #cccccc;
border-bottom:2px solid #cccccc;
}

#R .W1
{
background-image: url(../Imgs/Title.gif);
background-repeat:no-repeat;
background-position:12px 3px;
padding: 10px 10px 30px 10px;
text-align:right;
}


#R .WP
{
background-position:12px 3px;
padding: 0px;
text-align:right;
}

#R .W3
{
margin-top:10px;
padding: 5px;
border: 1px solid #e8e8e8;
color: #474747;
line-height: 1.4em;
text-align: justify;
height:400px;
width:570px;
overflow:auto;
SCROLLBAR-FACE-COLOR: #e8e8e8;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #d3d3d3;
SCROLLBAR-3DLIGHT-COLOR: #d3d3d3;
SCROLLBAR-ARROW-COLOR: #3f4169;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}

#R .W4
{
cursor:pointer;
}

.tdomain
{
float:left;
padding-left:340px;
padding-top:5px;
font-size:10pt;
color:red;
text-transform:uppercase;
}
Html index.html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="thanhansoft" />

<title>Untitled 1</title>
<link href="common.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="common.js"></script>
</head>

<body>

<div id="Promotion">
<div class="WP">
<img src="close.png" onclick="HidePromotion()" style="cursor: pointer;" align="right" />
</div>
<div style="clear: both;"></div>
<div id="km">
<img src="sale.jpg" alt="sale" />
</div>

</div>

<script language="javascript">
OpenWinPromotion();
</script>

</body>
</html>
bvnguyen viết 15:40 ngày 10/10/2018
sướng nhé, có code dùng rồi
xx3004 viết 15:36 ngày 10/10/2018
Bạn có thể tham khảo jQuery UI, cực kì dễ để làm việc này, ng` ta code sẵn cho bạn rồi, chỉ cần đem vào xài thôi.
http://jqueryui.com/demos/dialog/#modal-message
[x]
zmt264 viết 15:32 ngày 10/10/2018
Được gửi bởi thientn
Mọi người giúp em cách tạo một hộp thoại hiển thị giữa màn hình thông báo một vấn đề nào đó. Tránh cho người thực hiện bất cứ thao tác nào. Và có 2 nút ấn là "tiếp tục đọc" và tiếp sau đó là các hộp thoại tiếp theo. Hoặc "Thoát" để trở lại trang đang xem. Em xin cảm ơn!!
Có phải hộp thoại dạng sau ko: http://hoctudau.com/web-tools/getfiles/
thientn viết 15:32 ngày 10/10/2018
Anh "ltnhuan" cho em hỏi cái Code anh gửi cho em anh hướng dẫn cho em cách sử dụng đi ạ. Em mới học nên kiến thức còn ít lắm ạ
chanhtong1 viết 15:28 ngày 10/10/2018
bạn tập dùng jquery đi, rất tiện dụng đấy
thuyduongcd viết 15:44 ngày 10/10/2018
Có cái popup mà viết từng đó code cũng đáng nể thật đấy
xin_duoc_giup_do viết 15:33 ngày 10/10/2018
Được gửi bởi zmt264
Có phải hộp thoại dạng sau ko: http://hoctudau.com/web-tools/getfiles/
Chào anh ZMT264, em rất cần đoạn code như trang demo của anh, em muốn thay clip bằng một banner để anh đưa Banner vào Web. Khi khách vào trang chủ thì sẽ hiển thị banner này. Chỉ hiển thị 1 lần/1 IP/1 ngày và khách có thể chủ động tắt nó hoặc mình định thời cho nó tắt.

Cảm ơn!
thantaihnvn viết 15:36 ngày 10/10/2018
Chả biết làm j cả, chán wa
Bài liên quan
0