तरह से एक JavaScript अलर्ट() या शीघ्र() लग रहा है

Question

वहाँ एक चेतावनी या शीघ्र जावास्क्रिप्ट में की दिखता है बदलने के लिए कोई तरीका है बदल रहे हैं? एक छवि जोड़ने, फ़ॉन्ट रंग या आकार बदलने जैसी चीजें, और जो भी इसे अलग दिखेंगे।

Answer 1

alert और prompt फ़ंक्शंस ब्राउज़र द्वारा प्रदान किए गए एपीआई कॉल करते हैं, इसलिए आपके पास कोई नियंत्रण नहीं होगा कि वे कैसा दिखते हैं।

आप है, हालांकि उन कार्यों को फिर से परिभाषित क्या कर सकता है, और बदले शायद jQuery मोडल की तरह कुछ का उपयोग, उदा .:

window.alert = function(message) { 
    // Launch jQuery modal here.. 
}; 

window.prompt = function(message) { 
    // Launch jQuery modal here.. 
}; 

Answer 2

आपको लगता है कि संशोधित नहीं कर सकते; लेकिन आप showModalDialog जैसे कुछ का उपयोग कर सकते हैं, आपको केवल एचआरटीएल/सीएसएस फॉर्म को लोड करने के लिए एक यूआरआई की आवश्यकता है (यदि आप इसे एक अलग पृष्ठ में रख सकते हैं)।

Answer 3

मैथ्यू एबॉट के विचार पर विस्तार करते हुए, उसने मुझे मारा कि आप एक ऐसा जवाब चाहते हैं जो किसी भी ढांचे के बिना सादे पुराने जावास्क्रिप्ट का उपयोग करता हो। यहाँ एक त्वरित और गंदी पेज है कि एक साधारण बंद करें बटन के साथ एक div और संदेश केंद्र में प्रस्तुत उत्सर्जन करता है:

अलर्टबॉक्स और alertClose बटन

#alertBox{ 
    position:absolute; 
    top:100px; 
    left:100px; 
    border:solid 1px black; 
    background-color: #528CE0; 
    padding: 50px; 
    visibility: hidden; 
} 
#alertClose{ 
    position: absolute; 
    right:0; 
    top: 0; 
    background-color: black; 
    border: solid 1px white; 
    color: white; 
    width: 1em; 
    text-align: center; 
    cursor: pointer; 
} 

फिर कुछ जावास्क्रिप्ट ओवरराइड करने के लिए बनाया के लिए असहज सीएसएस चेतावनी समारोह में और अलर्टक्लोज़ पर क्लिक ईवेंट को संभालने के लिए एक समापन कार्य प्रदान करें।

function closeAlertBox(){ 
    alertBox = document.getElementById("alertBox"); 
    alertClose = document.getElementById("alertClose"); 
    alertBox.style.visibility = "hidden"; 
    alertClose.style.visibility = "hidden"; 
} 
window.alert = function(msg){ 
    var id = "alertBox", alertBox, closeId = "alertClose", alertClose; 
    alertBox = document.createElement("div"); 
    document.body.appendChild(alertBox); 
    alertBox.id = id; 
    alertBox.innerHTML = msg; 
    alertClose = document.createElement("div"); 
    alertClose.id = closeId; 
    alertClose.innerHTML = "x"; 
    alertBox.appendChild(alertClose); 
    alertBox.style.visibility = "visible"; 
    alertClose.style.visibility = "visible"; 
    alertClose.onclick = closeAlertBox; 
}; 

alert कॉलिंग, के रूप में मैथ्यू एबट का सुझाव दिया, अब div ही में बनाया गया प्रदर्शित करता है और एक्स क्लिक करने से वह अदृश्य करके यह खारिज।

alert("hello from the dummy alert box."); 

को लागू करने के लिए, क्या आप वाकई नहीं एक लाख गुना फिर से बना रहे हैं div बनाने के लिए चेतावनी समारोह में एक परीक्षण की आवश्यकता होगी और आप सीएसएस बनाने के लिए के साथ चारों ओर गंदगी नहीं करनी होंगी यह आपकी रंग योजना आदि फिट बैठता है, लेकिन यह आपके स्वयं के अलर्ट बॉक्स को कार्यान्वित करने का एक मोटा आकार है।

मुझे लगता है कि मुझे अधिक पसंद है और मैं मैथ्यू से सहमत हूं कि यह किसी प्रकार के संवाद या मोडल तत्व के साथ ऐसा कर रहा है जैसे कि jQuery या YUI जैसे प्रसिद्ध ढांचे के साथ लंबे समय तक बेहतर और अजीब रूप से आसान होगा।

Answer 4

मेरे अपने के एक त्वरित रन, इस पृष्ठ पर कोड के कुछ पर विस्तार:

function closeAlertBox() { 
 
    alertBox = document.getElementById("alertBox"); 
 
    alertClose = document.getElementById("alertClose"); 
 

 
    alertBox.parentNode.removeChild(alertBox); 
 
    alertClose.parentNode.removeChild(alertClose); 
 
} 
 

 
window.alert = function (msg) { 
 
    var id = "alertBox", alertBox, closeId = "alertClose", alertClose; 
 
    alertBox = document.createElement("div"); 
 
    document.body.appendChild(alertBox); 
 
    alertBox.id = id; 
 
    alertBox.innerHTML = msg; 
 
    alertClose = document.createElement("div"); 
 
    alertClose.id = closeId; 
 
    document.body.appendChild(alertClose); 
 
    alertClose.onclick = closeAlertBox; 
 
};

#alertBox { 
 
\t position: absolute; 
 
\t top: 30%; 
 
\t bottom: 60%; 
 
\t left: 40%; 
 
\t width: 20%; 
 
\t height: 10%; 
 
\t background-color: white; 
 
\t border-radius: 10px; 
 
\t padding: 10px; 
 
\t z-index: 2; 
 

 
\t text-align: center; 
 
\t color: black; 
 
} 
 

 
#alertClose { 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
\t background-color: rgba(0, 0, 0, .5); 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<html> 
 
<body> 
 
<h1>This is your page</h1> 
 
<p>With some content<p> 
 
<button onclick="alert('Send some message')">Click me</button> 
 
</body> 
 
</html>

लेकिन वहाँ भी कुछ अच्छा जवाब यहां हैं:

• how to change the style of alert box