HTML/CSS पॉपअप div क्लिक

मैं इस उदाहरण की तरह वर्तमान बटन के साथ अपने 'संक्षिप्त विवरण' चित्र/पेज के लिए पॉप अप विंडो के बजाय पॉपअप div बनाना चाहते: OMG! Ubuntu! Facebook like popup HTML/CSS पॉपअप div क्लिक

स्रोत

2013-09-28 Abac

कोड के लिए पूछ प्रश्न एक ** न्यूनतम ** समस्या की समझ को दिखाना चाहिए। इसका मतलब है कि आपको प्रयास किए गए समाधान शामिल करना होगा, क्यों उन्होंने काम नहीं किया और अपेक्षित परिणाम ** आपके प्रश्न ** में शामिल हैं। – Sumurai8

आप इसका उपयोग कर सकते हैं: jQuery मॉडल प्रकट करें: http://zurb.com/playground/reveal-modal-plugin –

127

डेमो

सामग्री क्षेत्र में आप जो कुछ भी प्रदर्शित करना चाहते हैं उसे प्रदान कर सकते हैं।

.black_overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    z-index: 1001; 
 
    -moz-opacity: 0.8; 
 
    opacity: .80; 
 
    filter: alpha(opacity=80); 
 
} 
 
.white_content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 25%; 
 
    width: 50%; 
 
    height: 50%; 
 
    padding: 16px; 
 
    border: 16px solid orange; 
 
    background-color: white; 
 
    z-index: 1002; 
 
    overflow: auto; 
 
}

<html> 
 

 
<head> 
 
    <title>LIGHTBOX EXAMPLE</title> 
 
</head> 
 

 
<body> 
 
    <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a> 
 
    </p> 
 
    <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a> 
 
    </div> 
 
    <div id="fade" class="black_overlay"></div> 
 
</body> 
 

 
</html>

स्रोत

2013-09-28 08:35:36 coder

+10

ग्रेट कोड, लेकिन दोनों पदों को 'निश्चित' होना चाहिए। यदि उपयोगकर्ता स्क्रॉल किए जाने के बाद लिंक पर क्लिक करता है, तो ओवरले और मोडल विंडो पृष्ठ के शीर्ष पर जाती है। – Kasperi

रुचि रखने वाले किसी भी व्यक्ति के लिए, यदि आप ओवरले को "पिछला विस्तार" व्यूपोर्ट (यानी पूरे पृष्ठ पर ले जाना चाहते हैं) को तय करने के लिए स्थिति सेट करें। यह ऐसा दिखाई देगा जैसे पूरे पृष्ठ में ओवरले है। – taylorcressy

आप बस का उपयोग कर सकते jQuery UI Dialog

उदाहरण:

$(function() { 
 
    $("#dialog").dialog(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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.3/themes/smoothness/jquery-ui.css" /> 
 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
 
</head> 
 

 
<body> 
 
    <div id="dialog" title="Basic dialog"> 
 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
    </div> 
 
</body> 
 
</html>

स्रोत

2013-09-28 08:34:41

पूर्णता के लिए, क्या आप को बनाने का प्रयास कर रहे हैं एक "मोडल विंडो" है।

कई जेएस समाधान आपको आसानी से उन्हें बनाने की अनुमति देते हैं, जो आपकी आवश्यकताओं के अनुरूप सर्वोत्तम खोजने के लिए समय लेते हैं।

मैं छोटी परियोजनाओं के लिए Tinybox 2 का इस्तेमाल किया है: http://sandbox.scriptiny.com/tinybox2/

स्रोत

2013-09-28 08:39:29

पूछताछकर्ता पृष्ठ के भीतर एचटीएमएल पॉप-अप के बारे में पूछता है, न कि "मोडल विंडो"। – dns

मैं टिनीबॉक्स की सिफारिश नहीं करता। यह अनियंत्रित है और स्रोत कोड obfuscated है। आपको हर समय परेशानी होगी। – John

HTML/CSS पॉपअप div क्लिक

उत्तर

संबंधित मुद्दे