重慶分公司
重慶分公司
.Net中怎么實(shí)現(xiàn)前端對(duì)話(huà)框和消息框-創(chuàng)新互聯(lián)
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān).Net中怎么實(shí)現(xiàn)前端對(duì)話(huà)框和消息框，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供
泗縣網(wǎng)站建設(shè)、泗縣做網(wǎng)站、泗縣網(wǎng)站設(shè)計(jì)、泗縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、泗縣企業(yè)網(wǎng)站模板建站服務(wù)，十余年
泗縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
畫(huà)一個(gè)簡(jiǎn)單的模型框
系統(tǒng)提示
添上基本的樣式
div.hi-dialog-box {
border: 1px #808080 solid;
width: 350px;
height: 200px;
border-radius: 3px;
}
div.hi-dialog-box div.hi-dialog-title {
border: 1px #808080 solid;
margin: 1px;
padding: 1px;
background-color: #dedcdc;
height: 14%;
cursor: move;
font-size: 20px;
}
div.hi-dialog-box div.hi-dialog-content {
height: 65%;
margin: 5px;
}
div.hi-dialog-box div.hi-dialog-foot {
margin: 1px;
padding: 1px;
height: 14%;
}
div.hi-dialog-box div.hi-dialog-foot input {
float: right;
margin-left: 5px;
font-size: 16px;
}效果圖：
是不是像那么回事了，不過(guò)現(xiàn)在還不能拖動(dòng)。拖動(dòng)，說(shuō)白了就是在鼠標(biāo)移動(dòng)的時(shí)候不停的修改絕對(duì)定位。
首先修改以下樣式：
用js代碼實(shí)現(xiàn)拖動(dòng)效果：
//鼠標(biāo)按下時(shí)
$("div.hi-dialog-title").mousedown(function (event) {
$("html").unbind();//首先清除事件方法
var click_clientX = event.clientX;//記錄鼠標(biāo)按下時(shí)相對(duì)當(dāng)前窗口的 x 坐標(biāo)
var click_clientY = event.clientY;//記錄鼠標(biāo)按下時(shí)相對(duì)當(dāng)前窗口的 y 坐標(biāo)
//取的對(duì)話(huà)框容器
var dialogBox = $(this).closest("div.hi-dialog-box");
//記錄對(duì)話(huà)框容器當(dāng)前位置
var dialogBoxX = parseInt($(dialogBox).css("left"));
var dialogBoxY = parseInt($(dialogBox).css("top"));
//鼠標(biāo)移動(dòng)時(shí)
$("html").mousemove(dialog_mousemove = function (event) {
//鼠標(biāo)按下后移動(dòng)量加上原來(lái)的位置
var top = event.clientY - click_clientY + dialogBoxY;
var left = event.clientX - click_clientX + dialogBoxX;
//修改對(duì)話(huà)框位置（這里就實(shí)現(xiàn)了移動(dòng)效果了）
$(dialogBox).css({ "left": left, "top": top });
});
//鼠標(biāo)按鍵松開(kāi)時(shí)
$("html").mouseup(function () {
//清除鼠標(biāo)移動(dòng)事件
$("html").unbind("mousemove", dialog_mousemove);
});
});以上js代碼就實(shí)現(xiàn)了對(duì)話(huà)框的拖動(dòng)效果。首先，只有當(dāng)鼠標(biāo)在對(duì)話(huà)框標(biāo)題區(qū)域按下鼠標(biāo)才可以拖動(dòng)，然后鼠標(biāo)移動(dòng)的的時(shí)候?qū)崟r(shí)計(jì)算和改變?nèi)萜鞯奈恢?，最后如果鼠?biāo)按鍵松開(kāi)這清除鼠標(biāo)移動(dòng)事件。
點(diǎn)擊按鈕后可回調(diào)
很多時(shí)候，我們點(diǎn)擊確定或取消的時(shí)候我們需要執(zhí)行回調(diào)（比如“您是否刪除”，點(diǎn)擊了確定后肯定需要做刪除操作）。
如此，我們點(diǎn)擊確定的時(shí)候會(huì)自動(dòng)關(guān)閉對(duì)話(huà)框并可以執(zhí)行自己需要執(zhí)行的一些操作。可以，有同學(xué)會(huì)說(shuō)，你這算什么狗屁對(duì)話(huà)框啊，html代碼全都需要直接編碼。是的，這只是簡(jiǎn)單的說(shuō)下思路，下面我們來(lái)簡(jiǎn)單整理下。
效果圖：
全部代碼：（當(dāng)然，這只是簡(jiǎn)單實(shí)現(xiàn)。還有很多需要繼續(xù)細(xì)化的效果，如：背景遮罩、如果實(shí)現(xiàn)點(diǎn)擊多次對(duì)話(huà)框）
* {
box-sizing: border-box;
}
.clearfix:after {
content: ' ';
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
div.hi-dialog-box {
border: 1px #808080 solid;
width: 350px;
height: 200px;
position: absolute;
top: 200px;
left: 40%;
border-radius: 3px;
}
div.hi-dialog-box div.hi-dialog-title {
border: 1px #808080 solid;
margin: 1px;
padding: 1px;
background-color: #dedcdc;
height: 14%;
cursor: move;
font-size: 20px;
}
div.hi-dialog-box div.hi-dialog-content {
height: 65%;
margin: 5px;
overflow: auto;
}
div.hi-dialog-box div.hi-dialog-foot {
margin: 1px;
padding: 1px;
height: 14%;
}
div.hi-dialog-box div.hi-dialog-foot input {
float: right;
margin-left: 5px;
font-size: 16px;
}
var hiDialog = {
init: function (title, messg, determineCallback, cancelCallback) {
title = title || "系統(tǒng)提示";
var determine = "", cancel = "";
if (typeof (determineCallback) == "function")
determine = '';
if (typeof (cancelCallback) == "function")
cancel = '';
if (!$("div.hi-dialog-box").length) {
var hi_dialog_box = '\
\
\
\
\
\
';
$("body").append(hi_dialog_box);
}
var $box = $("div.hi-dialog-box");
$box.find("div.hi-dialog-title").html(title);
$box.find("div.hi-dialog-content").html(messg);
$box.find("div.hi-dialog-foot").html(determine + cancel);
$("div.hi-dialog-box").show();
$box.find(".hi-dialog-determine").click(function () {
determineCallback();
hiDialog.close();
});
$box.find(".hi-dialog-cancel").click(function () {
cancelCallback();
hiDialog.close();
});
//鼠標(biāo)按下時(shí)
$("div.hi-dialog-title").mousedown(function (event) {
$("html").unbind();
var click_clientX = event.clientX;
var click_clientY = event.clientY;
var dialogBox = $(this).closest("div.hi-dialog-box");
var dialogBoxX = parseInt($(dialogBox).css("left"));
var dialogBoxY = parseInt($(dialogBox).css("top"));
//鼠標(biāo)移動(dòng)時(shí)
$("html").mousemove(dialog_mousemove = function (event) {
var top = event.clientY - click_clientY + dialogBoxY;
var left = event.clientX - click_clientX + dialogBoxX;
$(dialogBox).css({ "left": left, "top": top });
});
//鼠標(biāo)按鍵松開(kāi)時(shí)
$("html").mouseup(function () {
$("html").unbind("mousemove", dialog_mousemove);
});
});
},
close: function () {
$("div.hi-dialog-box").hide();
}
}
function click1() {
hiDialog.init("系統(tǒng)提示！", "測(cè)試", function () {
//點(diǎn)擊確定后的回調(diào)執(zhí)行
$(".messg").text("點(diǎn)擊了確定");
});
}
function click2() {
hiDialog.init("系統(tǒng)對(duì)話(huà)框~~", "什么亂七八糟的啊...", function () {
$(".messg").text("點(diǎn)擊了確定~~~");
}, function () {
$(".messg").text("點(diǎn)擊了取消~~");
});
}
