Yandan Açılır Form Alanı arıyorum

21-01-2021, 14:40:58

merhabalar, yan taraftan kutuya bastığımda açılır form alanı yapacağım örnek kodları nasıl bulabilirim.

örnek site:
http://crmmedya.com/

21-01-2021, 14:42:33

#2

Omerfd

Kimlik doğrulama veya yönetimden onay bekliyor.

Hocam boostrap modal araştırabilirsiniz. Css ile gayet güzel bir şekilde düzenleyebilirsiniz.

21-01-2021, 14:43:28

#3

ibrahimsavrum

Omerfd adlı üyeden alıntı: mesajı görüntüle

Hocam boostrap modal araştırabilirsiniz. Css ile gayet güzel bir şekilde düzenleyebilirsiniz.

ne diye araştırmam gerekiyor işte ?

21-01-2021, 14:45:13

#4

Omerfd

Boostrap Modal.

https://getbootstrap.com/docs/4.0/components/modal/

21-01-2021, 14:54:07

#5

G3da

Forumda bir kaç gün önce bir arkadaş için hazırlamıştım, sizin örneğe göre revize ettim.

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
      #hiddenContent .content{position:fixed;top:50%;border-top-right-radius:4px;border-bottom-right-radius:4px;transform:translate(0, -50%);left:-280px;width:280px;min-height:500px;z-index:12;background-color:#fff;    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.08);transition:left .25s ease-in-out 0s}
      #hiddenContent button{position:absolute;right:10px;top:10px;border-radius:4px;background:none;border:0;padding:0;width:30px;height:30px;background-color:#eee;cursor:pointer;z-index:11;transition:right .5s ease-in-out 0s}
      #hiddenContent button:focus{outline:none}
      #hiddenContent .mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.5);z-index:10;opacity:0;visibility:hidden;transition:all .1s ease-in-out 0s}
      #hiddenContent.show .content{left:0}
      #hiddenContent.show .mask{visibility:visible;opacity:1}
   </style>
</head>
<body>
   <button id="test">Demo</button>
   <div id="hiddenContent">
      <div class="content">
         <form style="padding:10px">
            <input type="text" value="bla bla">
         </form>
         <!-- Form  alanı -->
         <button type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="10.819" height="10.819" viewBox="0 0 10.819 10.819">
               <rect id="Rectangle_380" data-name="Rectangle 380" width="2.186" height="13.115" transform="translate(0 1.546) rotate(-45)" fill="#2d2d2d"/>
               <rect id="Rectangle_381" data-name="Rectangle 381" width="2.186" height="13.115" transform="translate(9.274) rotate(45)" fill="#2d2d2d"/>
            </svg>
         </button>
         
      </div>
      <div class="mask"></div>
   </div>
   <script>
      let hiddenContent = function(display) {
         document.getElementById("hiddenContent").className = display;
      }
      document.getElementById("test").addEventListener("click", function(){
         hiddenContent("show");
      });
      document.querySelector("#hiddenContent button").addEventListener("click", function(){
         hiddenContent();
      });
      document.querySelector("#hiddenContent .mask").addEventListener("click", function(){
         hiddenContent();
      });
   </script>
</body>
</html>

Hazırladığım hali şu idi;
https://www.r10.net/javascript-programlama/2658619-javascript-sorum-var.html#post1079145187

21-01-2021, 14:58:49

#6

ibrahimsavrum

G3da adlı üyeden alıntı: mesajı görüntüle

Forumda bir kaç gün önce bir arkadaş için hazırlamıştım, sizin örneğe göre revize ettim.

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
      #hiddenContent .content{position:fixed;top:50%;border-top-right-radius:4px;border-bottom-right-radius:4px;transform:translate(0, -50%);left:-280px;width:280px;min-height:500px;z-index:12;background-color:#fff;    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.08);transition:left .25s ease-in-out 0s}
      #hiddenContent button{position:absolute;right:10px;top:10px;border-radius:4px;background:none;border:0;padding:0;width:30px;height:30px;background-color:#eee;cursor:pointer;z-index:11;transition:right .5s ease-in-out 0s}
      #hiddenContent button:focus{outline:none}
      #hiddenContent .mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.5);z-index:10;opacity:0;visibility:hidden;transition:all .1s ease-in-out 0s}
      #hiddenContent.show .content{left:0}
      #hiddenContent.show .mask{visibility:visible;opacity:1}
   </style>
</head>
<body>
   <button id="test">Demo</button>
   <div id="hiddenContent">
      <div class="content">
         <form style="padding:10px">
            <input type="text" value="bla bla">
         </form>
         <!-- Form  alanı -->
         <button type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="10.819" height="10.819" viewBox="0 0 10.819 10.819">
               <rect id="Rectangle_380" data-name="Rectangle 380" width="2.186" height="13.115" transform="translate(0 1.546) rotate(-45)" fill="#2d2d2d"/>
               <rect id="Rectangle_381" data-name="Rectangle 381" width="2.186" height="13.115" transform="translate(9.274) rotate(45)" fill="#2d2d2d"/>
            </svg>
         </button>
         
      </div>
      <div class="mask"></div>
   </div>
   <script>
      let hiddenContent = function(display) {
         document.getElementById("hiddenContent").className = display;
      }
      document.getElementById("test").addEventListener("click", function(){
         hiddenContent("show");
      });
      document.querySelector("#hiddenContent button").addEventListener("click", function(){
         hiddenContent();
      });
      document.querySelector("#hiddenContent .mask").addEventListener("click", function(){
         hiddenContent();
      });
   </script>
</body>
</html>

Hazırladığım hali şu idi;
https://www.r10.net/javascript-programlama/2658619-javascript-sorum-var.html#post1079145187

ellerine sağlık hocam