Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (67480 Members, 783 Products, 5290 Topic, 12955 Comments)

Mengatasi Tampilan Modal yang Terhalangi oleh Backdrop

Dibuat
Login Terakhir 3 Tahun lalu,
Telah Dilihat 1979 Kali
Ujang Rukman Mengatakan : Sultan Account
  1. Assalamualaikum Warahmatullahi Wabarakatuh... mas mohon bantuannya saya menambahkan view modal di halaman user SIKOLAG_CI alhamdulilah data berhasil tampil dengan baik namun masalahnya modal nya terhalangi sama backdrop ketika di tampilan hp, jadi ga bisa di klik apa2 mas, conto tampilan nya sepeti gambar dibawah, atau bisa di cek di man4smi.projeckweb.com
Ada 1 File Kiriman :
1. 40012817_2094663840603969_4709516169315352576_o1.jpg (44 KB)

Ada 4 Jawaban

Bukhori Muslim
commented on 26 Agu 2018 05:41:35
  1. Assalam,.. tambahkan pada modalnya css :
  2. z-index: 9999;
Ujang Rukman
commented on 26 Agu 2018 07:23:41
  1. Assalam,.. malah jadi di tampilan desktop juga sama mas terhalang
  2.  
  3. ini css nya
  4. .modal-open {
  5. overflow: hidden;
  6. }
  7. .modal {
  8. position: fixed;
  9. top: 0;
  10. right: 0;
  11. bottom: 0;
  12. left: 0;
  13. z-index: 1050;
  14. display: none;
  15. overflow: hidden;
  16. -webkit-overflow-scrolling: touch;
  17. outline: 0;
  18. }
  19. .modal.fade .modal-dialog {
  20. -webkit-transition: -webkit-transform .3s ease-out;
  21. -o-transition: -o-transform .3s ease-out;
  22. transition: transform .3s ease-out;
  23. -webkit-transform: translate(0, -25%);
  24. -ms-transform: translate(0, -25%);
  25. -o-transform: translate(0, -25%);
  26. transform: translate(0, -25%);
  27. }
  28. .modal.in .modal-dialog {
  29. -webkit-transform: translate(0, 0);
  30. -ms-transform: translate(0, 0);
  31. -o-transform: translate(0, 0);
  32. transform: translate(0, 0);
  33. }
  34. .modal-open .modal {
  35. overflow-x: hidden;
  36. overflow-y: auto;
  37. }
  38. .modal-dialog {
  39. position: relative;
  40. width: auto;
  41. margin: 10px;
  42. }
  43. .modal-content {
  44. position: relative;
  45. background-color: #fff;
  46. -webkit-background-clip: padding-box;
  47. background-clip: padding-box;
  48. border: 1px solid #999;
  49. border: 1px solid rgba(0, 0, 0, .2);
  50. border-radius: 6px;
  51. outline: 0;
  52. -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  53. box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  54. }
  55. .modal-backdrop {
  56. position: fixed;
  57. top: 0;
  58. right: 0;
  59. bottom: 0;
  60. left: 0;
  61. z-index: 9999;
  62. background-color: #000;
  63. }
  64. .modal-backdrop.fade {
  65. filter: alpha(opacity=0);
  66. opacity: 0;
  67. }
  68. .modal-backdrop.in {
  69. filter: alpha(opacity=50);
  70. opacity: .5;
  71. }
  72. .modal-header {
  73. min-height: 16.42857143px;
  74. padding: 15px;
  75. border-bottom: 1px solid #e5e5e5;
  76. }
  77. .modal-header .close {
  78. margin-top: -2px;
  79. }
  80. .modal-title {
  81. margin: 0;
  82. line-height: 1.42857143;
  83. }
  84. .modal-body {
  85. position: block;
  86. padding: 15px;
  87. }
  88. .modal-footer {
  89. padding: 15px;
  90. text-align: right;
  91. border-top: 1px solid #e5e5e5;
  92. }
  93. .modal-footer .btn + .btn {
  94. margin-bottom: 0;
  95. margin-left: 5px;
  96. }
  97. .modal-footer .btn-group .btn + .btn {
  98. margin-left: -1px;
  99. }
  100. .modal-footer .btn-block + .btn-block {
  101. margin-left: 0;
  102. }
  103. .modal-scrollbar-measure {
  104. position: absolute;
  105. top: -9999px;
  106. width: 50px;
  107. height: 50px;
  108. overflow: scroll;
  109. }
  110. @media (min-width: 768px) {
  111. .modal-dialog {
  112. width: 600px;
  113. margin: 30px auto;
  114. }
  115. .modal-content {
  116. -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  117. box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  118. }
  119. .modal-sm {
  120. width: 300px;
  121. }
  122. }
  123. @media (min-width: 992px) {
  124. .modal-lg {
  125. width: 900px;
  126. }
  127.  
  128. }
Ujang Rukman
commented on 26 Agu 2018 16:57:58
  1. Assalam,.. seteleh saya coba hapus script ini di template.php <link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>template/<?php echo template(); ?>/background/<?php echo background(); ?>/responsive.css" />
  2. ternyata backdrop nya tidak menghalangi modal lagi mas, nah kira2 di responsive.css ini yang sebelah mana yang harus saya rubah
Ujang Rukman
commented on 26 Agu 2018 17:56:33
  1. Assalam,.. lebih tepatnya di reponsive => ipad.css mas kira2 yang mana harus saya rubah
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!