alert box with image

salione · 7 ژانویه 2012

سلام
من میخوام روی یک دکمه کلیک کنم و عکسی را به صورت alertدر همان صفحه نشان دهد
لطفا راهنمایی کنید

silverboy.ir · 7 ژانویه 2012

alert نمی تونه عکس رو نشون بده و باید شبیه سازی بشه از طریق این کد می تونید چیز خوبی دربیارید

کد جاوا اسکریپت :

کد:

$(document).ready(function() { 
 
    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');
     
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
     
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
         
        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.8); 
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000);
     
    });
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });    
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });        
     
});

نمونه کد بخش html :

کد:

 <a href="#dialog" class="bt" name="modal">?</a>

و css های لازم

کد:

/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
  top : 0px;
}
   
#boxes .window {
  position:absolute;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
 
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
    background-color: white;
    border: 1px solid white;
    border-radius: 8px 8px 8px 8px;
    color: black;
    height: 500px;
    left: 71px !important;
    width: 800px;
}
#dialog a {
    color : white;
}

salione · 7 ژانویه 2012

ببخشید من زیاد javascript بلد نیستم
این کد هیچ کاری انجام نداد
نمیتونم کد رو بخونم
میشه یه راهنمایی راحت تر بکنید؟ممنون

silverboy.ir · 7 ژانویه 2012

ببخشید یه بخشش یادم رفت

کد:

<div id="mask">
    test;
    <a>close</a>
</div>

کلش میشه این :‌

کد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Silverboy" />


    <title>Untitled 1</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
 
    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');
     
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
     
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
         
        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.8); 
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000);
     
    });
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });    
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });        
     
});
    </script>
  
    <style type="text/css">
            /* Z-index of #mask must lower than #boxes .window */
    #mask {
      position:absolute;
      z-index:9000;
      background-color:#000;
      display:none;
      top : 0px;
    }
       
    #boxes .window {
      position:absolute;
      width:440px;
      height:200px;
      display:none;
      z-index:9999;
      padding:20px;
    }
     
     
    /* Customize your modal window here, you can add background image too */
    #boxes #dialog {
        background-color: white;
        border: 1px solid white;
        border-radius: 8px 8px 8px 8px;
        color: black;
        height: 500px;
        left: 71px !important;
        width: 800px;
    }
    #dialog a {
        color : white;
    }
    </style>
</head>

<body>

 <a href="#dialog" class="bt" name="modal">?</a>
<div id="mask">
    test;
    <a>close</a>
</div>
</body>
</html>

البته امیدوارم css بلد باشی

alert box with image

salione

کاربر تازه وارد

silverboy.ir

کاربر قدیمی پرشین تولز

salione

کاربر تازه وارد

silverboy.ir

کاربر قدیمی پرشین تولز

بک‌لینک