всплывающее окно в js
Всем доброго времени суток, уважаемые форумчане!
Я прошу прощения, что отвлекаю вас из-за совсем банального вопроса, но для меня js не понятен вообще никак и проблема стоит остро. возникла задача как-то вызывать всплывающее окно при обработка данного запроса
function AddCompare(product) {
ProductsInCart.push(product);
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonAdd";
//frm.page.value = "shop.comparison_short";
handleUpdateCompare(frm);
}
из того, что я прочитала: надо создать html файл с разметкой окна и css файл. до этого момента понятно. дальше все... =( как это прописать в вышеуказанном коде? в случае, если я задала какой-то совсем глупый вопрос - так и напишите. а то складывается впечатление, что я на форумах со стенами общаюсь. заранее благодарна за любой ответ.:) |
Скажем прямо мало понятно что вы делаете
в качестве хоть какого то примера приведу стандартное окно/диалог из jqueryui. Оригинал здесь http://jqueryui.com/dialog/#default нажмите на play
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).html("ВОТ ЗДЕСЬ БЫ МОГ БЫТЬ ВАШ КОНТЕНТ");
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog"></div>
</body>
</html>
|
Уважаемый DjDiablo, благодарю за то, что Вы отозвались. сейчас попробую объяснить что я пытаюсь сделать. сразу оговорюсь, что программирование для меня пока что очень темный лес, поэтому прошу прощения за неверные формулировки.
в интернет-магазине есть сравнение товаров. когда нажимаешь на "сравнить" нужно чтобы появлялось окно с текстом "товар добавлен в сравнение". в скрипте изначально не продумана эта функция. обработка запроса (добавление товара в сравнение, удаление товара из сравнения) происходит в js файле. добавление товара в сравнение - вот этот вот кусок
function AddCompare(product) {
ProductsInCart.push(product);
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonAdd";
//frm.page.value = "shop.comparison_short";
handleUpdateCompare(frm);
}
как можно сюда приделать всплывающее окно. или нужен полный код, чтобы понять? |
Цитата:
|
Екатерина ваш код вырванный из контекста это всего лишь набор букв, смысл в слова закладывает программист в других частях программы, тот кусок который вы показываете без других частей программы не имеет смысла. Остаётся пальцев в небо тыкать в надежде попасть
мы можем попробывать прекрутить диалог к вашей странице вставьте в заголовок head <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> гденибудь в теледокумента вставьте <div id="dialog" title="Basic dialog">Товар добавлен в корзину..</div> и немного измените скрипт дописав одну строчку вызывающую далог
function AddCompare(product) {
ProductsInCart.push(product);вы
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonAdd";
//frm.page.value = "shop.comparison_short";
handleUpdateCompare(frm);
$( "#dialog" ).dialog();
}
давайте посмотрим что получится и насколько близко это к тому что вы хотели |
не работает. смотрите
http://test.katalliana.org/ru/intern...la-stulya.html это страница со сравнением (чтобы Вам долго не ковыряться по всему сайту). когда добавляешь товар в сравнение - под списком товаров и перед модулем "Последние поступления" (внизу странички) появляется модуль сравнения. в данном случае окошко отображается в левом верхнем углу (текст - 123456), товары в сравнение не добавляются, модуль не появляется. вот на этом сайте можете глянуть как выглядит сравнение http://testshop.katalliana.org/ru/in...la-stulya.html на всякий случай прикрепляю полный код скрипта
function removeByElement(arrayName,arrayElement) {
for(var i=0; i<arrayName.length;i++) {
if(arrayName[i]==arrayElement) arrayName.splice(i,1);
}
}
function CompareProduct(el, type_id) {
var Product_ID = el.name;
Product_ID = Product_ID.replace("compare_","");
//alert("ДО: productID="+Product_ID+" ProductsInCart.length="+ProductsInCart.length);
if (el.checked && CompareTypeID != -1 && type_id!=CompareTypeID) {
alert("Hельзя сравнивать товары разного типа");
return false;
}
else if (el.checked && ProductsInCart.length>=MaxProductToCompare) {
alert("Нельзя сравнивать более " + MaxProductToCompare + " продуктов одновременно");
return false;
}
else if (el.checked) {
CompareTypeID = type_id;
AddCompare(Product_ID);
}
else RemoveCompare(Product_ID);
//alert("ПОСЛЕ: productID="+Product_ID+" ProductsInCart.length="+ProductsInCart.length);
return true;
}
function AddCompare(product) {
ProductsInCart.push(product);вы
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonAdd";
//frm.page.value = "shop.comparison_short";
handleUpdateCompare(frm);
$( "#dialog" ).dialog();
}
function RemoveCompare(product) {
//alert(product);
removeByElement(ProductsInCart,product);
if (ProductsInCart.length<=0) CompareTypeID=-1;
//alert(ProductsInCart.length);
//alert(ProductsInCart[0]);
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonDelete";
handleUpdateCompare(frm);
}
//для удаления из сравнения на странице сравнения
function RemoveComparePage(product) {
//alert(product);
removeByElement(ProductsInCart,product);
var page;
if (ProductsInCart.length<=0){ CompareTypeID=-1; page = "shop.browse";}
else page = "shop.compare";
//alert(ProductsInCart.length);
var frm= $("frmProductCompare");
frm.product_id.value=product;
frm.func.value="comparisonDelete";
frm.page.value=page;
frm.compare_type.value = CompareTypeID;
frm.submit();
}
function ClearCompare() {
var el;
for(var i=0;i<ProductsInCart.length;i++){
//alert(ProductsInCart[i]);
el= $("compare_cart_"+ProductsInCart[i]);
if (el && el.checked) el.checked=false;
}
ProductsInCart=[];
//alert(ProductsInCart.length);
CompareTypeID=-1;
var frm= $("frmProductCompare");
frm.func.value="comparisonClear";
handleUpdateCompare(frm);
}
//Очистка на странице сравнения
function ClearComparePage() {
var el;
for(var i=0;i<ProductsInCart.length;i++){
//alert(ProductsInCart[i]);
el= $("compare_cart_"+ProductsInCart[i]);
if (el && el.checked) el.checked=false;
}
ProductsInCart=[];
//alert(ProductsInCart.length);
CompareTypeID=-1;
var frm= $("frmProductCompare");
frm.func.value="comparisonClear";
frm.page.value="shop.browse";
frm.submit();
}
/*function handleUpdateCompare( frm ) {
var callback = function(responseText) {
updateComparison()
//$("Compare_Thumb_Container").innerHTML=responseText;
ToggleCompareCheck(false);
}
var opt = {
method: "post",
data: frm,
onComplete: callback,
evalScripts: true
}
ToggleCompareCheck(true);
new Ajax(frm.action, opt).request();
}*/
//function updateComparison() {
/*
function handleUpdateCompare( frm ) {
alert(frm.func.value);
var callbackCart = function(responseText) {
carts = $$( '.vmComparisonModule' );
if( carts ) {
try {
for (var i=0; i<carts.length; i++){
carts[i].innerHTML = responseText;
color = carts[i].getStyle( 'color' );
bgcolor = carts[i].getStyle( 'background-color' );
if( bgcolor == 'transparent' ) {
// If the current element has no background color, it is transparent.
// We can't make a highlight without knowing about the real background color,
// so let's loop up to the next parent that has a BG Color
parent = carts[i].getParent();
while( parent && bgcolor == 'transparent' ) {
bgcolor = parent.getStyle( 'background-color' );
parent = parent.getParent();
}
}
var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});
fxc.start( '#222', color );
fxbgc.start( '#fff68f', bgcolor );
//if( parent ) {
// setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
//}
}
} catch(e) {}
}
ToggleCompareCheck(false);
}
//option = { method: 'POST', onComplete: callbackCart }
var frm1 = { only_page:1,
page: frm.page.value,
category_id: frm.category_id.value,
product_id: frm.product_id.value,
func: "comparisonAdd",
compare_type: frm.compare_type.value,
Itemid: frm.Itemid.value,
option: frm.option.value
}
var opt = {
method: "post",
data: frm1,
//data: { only_page:1, option: "com_virtuemart", page: frm.page.value },
onComplete: callbackCart,
evalScripts: true
//?page=shop.comparison_short
}
ToggleCompareCheck(true);
new Ajax('http://joom15/index2.php?page=shop.comparison_short', opt).request();
}
*/
function handleUpdateCompare( frm ) {
var callback = function(responseText) {
updateComparison()
//$("Compare_Thumb_Container").innerHTML=responseText;
ToggleCompareCheck(false);
}
var opt = {
method: "post",
data: frm,
onComplete: callback,
evalScripts: true
}
ToggleCompareCheck(true);
new Ajax(frm.action, opt).request();
}
function updateComparison() {
var callbackCart = function(responseText) {
carts = $$( '.vmComparisonModule' );
if( carts ) {
try {
for (var i=0; i<carts.length; i++){
carts[i].innerHTML = responseText;
color = carts[i].getStyle( 'color' );
bgcolor = carts[i].getStyle( 'background-color' );
if( bgcolor == 'transparent' ) {
// If the current element has no background color, it is transparent.
// We can't make a highlight without knowing about the real background color,
// so let's loop up to the next parent that has a BG Color
parent = carts[i].getParent();
while( parent && bgcolor == 'transparent' ) {
bgcolor = parent.getStyle( 'background-color' );
parent = parent.getParent();
}
}
var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});
fxc.start( '#222', color );
fxbgc.start( '#fff68f', bgcolor );
if( parent ) {
setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
}
}
} catch(e) {}
}
}
option = { method: 'POST', onComplete: callbackCart }
new Ajax('index2.php?only_page=1&page=shop.comparison_short&option=com_virtuemart', option).request();
}
function ToggleCompareCheck(disabled) {
var a = $$(".compare_checkbox");
for (i=0; i<a.length; i++) a[i].disabled=disabled;
}
function RemoveCompareCheck(product) {
var el= $("compare_cart_"+product);
if (el && el.checked) el.checked=false;
RemoveCompare(product+'');
}
function handleGoToCompare() {
if (!ProductsInCart || ProductsInCart.length<2) {
alert("You must select 2 or more products to compare!");
return;
}
var frm= $("frmProductCompare");
frm.page.value="shop.compare";
frm.compare_type.value = CompareTypeID;
frm.func.value="";
frm.submit();
}
function GoToCatalog() {
var frm= $("frmProductCompare");
if(frm.category_id.value>0)
frm.page.value="shop.browse";
else frm.page.value="";
frm.func.value="";
frm.submit();
}
|
еще не работают 2 боковых слайдера и не грузится опрос в правой колонке.
такое чувство, что там конфликт скриптов. =( |
всё верно
это конфлиет mootools и jquery рецепт http://nauca.com.ua/zametki/resolve-...uery-mootools/ соответственно и строчка инициализации будет jQuery( "#dialog" ).dialog(); |
понятно, но очень образно
вот содержимое HEAD Код:
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/modules/mod_slider/css/style.css"/>или в slider.js дело в том, что из прочитанного я мало что поняла, поэтому прошу прощения, что задаю глупый вопрос. |
вот здесь я подключил оба фреймворка и всё работает
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://www.alexilin.ru/web/animated_menu/mootools.js"></script>
<script>
jQuery(function(){
alert("всё работает");
})
</script>
я так понимаю это joomla и вас интерисует тема подклчения jquery к joonla есть альтернативнй подход к примеру использовать mootools плагин, если найдёте вменяемый. |
| Часовой пояс GMT +3, время: 04:55. |