मैं अपना खुद का उत्पाद टूर हैंडलिंग (intro.js जैसे कुछ प्रयास करने के बाद) बनाने की कोशिश कर रहा हूं।

यहां एक JSFiddle है जिसे मैंने अभी बनाया है।

मेरे पास CSS के साथ एक div है:

.highlight {
  position: fixed;
  top: 14px;
  left: 16px;
  width: 54px;
  height: 40px;
  z-index: 1000;
  pointer-events: none;
}

.highlight__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  border-radius: 5px;
  transition: all .5s ease;
  border: 2000px solid rgba(0 ,0 ,0 ,0.85);
  margin: -1000px;
  box-sizing: content-box;
  transform: translate3d(-1000px, -1000px, 0);
  pointer-events: none;
}

जैसा कि आप देख सकते हैं, बटन हाइलाइट किया गया है, और क्लिक करने योग्य है, लेकिन अन्य दो बटन भी क्लिक किए जा सकते हैं।

मैं हाइलाइट किए गए क्षेत्र में केवल तत्व को क्लिक करने योग्य कैसे बना सकता हूं?

साथ ही - क्या कोई उत्पाद टूर/ट्यूटोरियल जेएस पुस्तकालय हैं जिनके बारे में मुझे अवगत होना चाहिए? वे, जिनमें मूल रूप से वह कार्यक्षमता होगी जिसकी मुझे आवश्यकता है।

1
Ancinek 31 अगस्त 2018, 14:52
1
एक नज़र डालें EnjoyHint, हो सकता है कि आप यही ढूंढ रहे हों: xbsoftware.com /उत्पाद/आनंद लें
 – 
Calvin Nunes
31 अगस्त 2018, 15:00
और बटन के बारे में, आपकी वर्तमान संरचना के साथ, मैं सभी buttons में एक disabled जोड़ूंगा, फिर केवल उस बटन के लिए अक्षम को हटा दूंगा जिसे वर्तमान "टूर स्टेप" में JS का उपयोग करके क्लिक किया जाना चाहिए।
 – 
Calvin Nunes
31 अगस्त 2018, 15:03
बहुत - बहुत धन्यवाद। एन्जॉयहिंट वास्तव में बहुत अच्छा लग रहा है और मुझे लगता है कि मैं इसे फोर्क कर दूंगा और अपनी जरूरतों को पूरा करने के लिए थोड़ा सा संशोधित करूंगा। मैंने बटन आदि को अक्षम करने के बारे में भी सोचा, लेकिन यह एक सार्वभौमिक समाधान नहीं है
 – 
Ancinek
31 अगस्त 2018, 15:46
1
मैं इसके बजाय यह जैसा कुछ करना चाहूंगा।
 – 
VXp
3 सितंबर 2018, 09:07
1
धन्यवाद :) यही वह रास्ता है जिस पर मैं आज सुबह गया था!
 – 
Ancinek
3 सितंबर 2018, 15:11

2 जवाब

मैंने आपका jsfiddle यहां अपडेट कर दिया है

मैंने आपके css के button अनुभाग में pointer-events: none जोड़ा और बटन वन को enabledButton का एक वर्ग दिया।

फिर मैंने pointer-events: auto को आपके css . के .enabledButton अनुभाग में जोड़ा

Jquery की एक पंक्ति के साथ आप enabledButton वर्ग को सभी बटनों से हटा सकते हैं: $("button").removeClass("enabledButton");

आप तब enabledButton वर्ग को केवल उस बटन में जोड़ते हैं जिसे आप हाइलाइट करते हैं।

अब, enabledButton के वर्ग वाला बटन क्लिक करने योग्य होगा जबकि अन्य सभी नहीं। इस तरह आप उस बटन को स्पष्ट रूप से सक्षम करते हैं जिसे आप चाहते हैं कि उपयोगकर्ता क्लिक करे जबकि अन्य सभी बटन डिफ़ॉल्ट रूप से अक्षम हैं।

1
Don Shrout 31 अगस्त 2018, 15:36

आप कुछ ऐसा करने के लिए सीएसएस का उपयोग कर सकते हैं

. disabled{
       pointer-events : none;
    }

और इस वर्ग को अन्य गैर-हाइलाइट किए गए बटनों में जोड़ें।

एक अन्य समाधान जिसके लिए कुछ जावास्क्रिप्ट की आवश्यकता होती है, वह है अपने बटनों में एक डिफ़ॉल्ट Html disabled विशेषता जोड़ना, और कुछ इसी तरह के innerHTML का उपयोग करके केवल हाइलाइट किए गए बटन के लिए इसे हटाना।

0
Ahmed Hammad 31 अगस्त 2018, 15:07