iT邦幫忙

0

fullpage.js 放入 modal 顯示問題

  • 分享至 

  • twitterImage

各位大大好:
想請問modal跳出來後,想要可以填表單跟滾輪固定(桌機跟手機的背景都可以固定與填表單),請問要怎麼處理呢?
http://www.ee.nsysu.edu.tw/key/c2.html
因為我有加以下語法,所以當超過一個頁面後,會跑出scroll出來,但點modal就無法填資料(桌機的滾輪可固定背景不會換),若沒超過一個頁面scroll不會出來,點modal就可以填資料(但滾輪不會固定,背景會一直換)。

謝謝!

scrollOverflow:true,
css3:false,
	          	

網頁語法如下

<div id="dowebok">
<div class="section">

<button class="change" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">modal</button><br>
<p></p>	     


<div class="modal fade " id="exampleModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        
        
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      
      <div class="modal-body">
             <div class="form-row">
          
          <div class="form-group col-md-6 " >
            <label for="recipient-name" class="col-form-label" >姓名:</label>
            <input type="text" class="form-control" id="name">
          </div>
         
         
        </div>
        
             <div class="form-row">
          
          <div class="form-group col-md-6 "  >
            <label for="recipient-name" class="col-form-label" >分機/電話:</label>
            <input type="text" class="form-control" id="phone">
          </div>
  
        </div>
          
         <div class="form-group">
            <label for="message-text" class="col-form-label" >事由:</label>
            <textarea class="form-control" id="thing"></textarea>
          </div>
      
        
         
      <div class="form-row">
      
        <div class="input-group clockpicker" style="width: 50%; float:left;" >
        <label for="message-text" class="col-form-label" >開始時間:</label>
        <input type="text" class="form-control" value="08:00" id="timest" data-toggle="popover" data-placement="top" title="注意!" data-content="開始時間不能大於結束時間" data-trigger="focus"   onchange="timeprefer()">
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
        </span>
        </div>
        
        <div class="input-group clockpicker1" style="width: 50%; float:right;" >
        <label for="message-text" class="col-form-label" >結束時間:</label>
        <input type="text" class="form-control" value="09:00" id="timeov" data-toggle="popover" data-placement="top" title="注意!" data-content="結束時間不能小於開始時間" data-trigger="focus" onchange="timeprefer()">
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
        </span>
        </div>
        </div>      
      </div>
                       
     
      <div class="modal-footer">
       
              
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="send" class="btn btn-primary" onclick="myFunction()">Send message</button>
        
      </div>
    
    </div>
  </div>
</div>

	</div>
	<div class="section">
		<h3>第二屏</h3>
		<p>请查看右边的圆圈</p>
	</div>
	<div class="section">
		<h3>第三屏</h3>
		<p>圆圈还可以设置位置,颜色,加上 tip,点击可以控制</p>
	</div>
	<div class="section">
		<h3>第四屏</h3>
		<p>这是最后一屏</p>
	</div>
</div>

<script type="text/javascript">

function timeprefer(){

var timest=$("#timest").val();
var timeov=$("#timeov").val();

if(timeov<=timest && timeov!="00:00"){
	
	
$(function () {
  $('[data-toggle="popover"]').popover('show')
});

$("#timeov").addClass("is-invalid");
$("#timest").addClass("is-invalid");
document.getElementById("send").disabled=true;

}
else{

$("#timeov").removeClass("is-invalid");
$("#timest").removeClass("is-invalid");
document.getElementById("send").disabled=false;
$(function () {
  $('[data-toggle="popover"]').popover('hide')
});

}


}

$('.clockpicker').clockpicker(

{placement:  'bottom'}

);


$('.clockpicker1').clockpicker(

{placement: 'bottom'}


);

$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#FFFFFF', '#4BBFC3', '#7BAABE', '#f90'],
		navigation: true,
		scrollOverflow:true,
	        css3:false,
	          	
	});
	
	
	
});


</script> 

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
marlin12
iT邦研究生 5 級 ‧ 2018-04-17 21:53:54
最佳解答

modal跳出來後,就無法填資料。原因是bootstrap想把modal帶到最上層,但郤被困在fullpage模擬出來的頁面裏。要解決這個問題,只需要把modal改為放在fullpage控制頁面的外面。

<body>
    <!-- modal放在<div id="dowebok">的外面 -->
	<div class="modal fade " id="exampleModal" role="dialog">
      ...   ...  ...
    </div>
    
    <div id="dowebok">
		<div class="section section1">
			<button class="change" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">modal</button>
            ...   ...  ...
       </div>
		<div class="section">
			<h3>第二屏</h3>
			<p>请查看右边的圆圈</p>
		</div>
		<div class="section">
			<h3>第三屏</h3>
			<p>圆圈还可以设置位置,颜色,加上 tip,点击可以控制</p>
		</div>
		<div class="section">
			<h3>第四屏</h3>
			<p>这是最后一屏</p>
		</div>
    </div>      

另外,javascript最好放在html最底的位置,和等到頁面load完才運行你的代碼。

<script>
    $(window).on( 'load', function () {
        // 你的代碼 ...
    });
</script>    
看更多先前的回應...收起先前的回應...
mayyola iT邦研究生 2 級 ‧ 2018-04-17 22:48:16 檢舉

m大您好~已解決!!謝謝:)
想再請問若超過一個頁面後,手機銀幕用手不能放大,也不能左右滑動,想請問這有辦法解決嗎? 謝謝!

marlin12 iT邦研究生 5 級 ‧ 2018-04-19 00:34:59 檢舉

fullPage只可以在autoscrolling = false的時候,才能讓頁面放大。在手機上,可以透過設定responsiveWidth來間接開關autoscrolling。
例如,設定responsiveWidth:600,當手機屏幕的闊度少於600px時,autoscrolling便會自動關閉,那時用戶便可以放大頁面。當手機屏幕的闊度大於600px時,autoscrolling便會自動回復開啟。
你可以用下面這個codepen來測試這個功能。
fullPage - responsiveWidth

mayyola iT邦研究生 2 級 ‧ 2018-04-19 09:00:46 檢舉

m大您好:謝謝你,像這要怎麼查詢他的文件,有這些規定?

marlin12 iT邦研究生 5 級 ‧ 2018-04-20 01:00:50 檢舉

fullPage是將每個section的大小,設定為viewport的大小,又怎可能讓用戶隨意放大、縮小。如果用戶要取回控制權,唯有暫停fullPage的功能。雖然官方文件沒寫出來,這些限制不是已經很明顯嗎?
正如froce大所說,用這些黑盒子之前,應該對它的運作有一個基本概念。

mayyola iT邦研究生 2 級 ‧ 2018-04-20 08:42:36 檢舉

謝謝:)

mayyola iT邦研究生 2 級 ‧ 2018-04-20 14:32:00 檢舉

m大您好:
我剛有試著把responsiveWidth:1000後可以放大,但是右邊的導航點點會不見,縮到responsiveWidth:950右邊導航點點會出現但是就是無法容易縮放- -

marlin12 iT邦研究生 5 級 ‧ 2018-04-20 21:40:21 檢舉

導航點點不見了,不打緊!把它叫回來便可以。

<style type="text/css">
  @media screen and (max-width: 1000px) {
    #fp-nav {
      display: block !important;
    }
  }
</style>
mayyola iT邦研究生 2 級 ‧ 2018-04-20 22:22:00 檢舉

m大好~是可以叫得回來,不過他滾輪會失效..有點調不回剛好在那個區塊- -拍謝

marlin12 iT邦研究生 5 級 ‧ 2018-04-20 22:59:41 檢舉

沒錯,當頁闊小於responsiveWidth時,fullPage功能會被關閉,這時候,滾輪是不能控制[長過viewport的section]。
手機沒有問題,因為沒有滾輪。但是,如果電腦browser的頁闊小於responsiveWidth時,還是會有問題。這個讓我想一下有沒有解決方法。

mayyola iT邦研究生 2 級 ‧ 2018-04-20 23:17:07 檢舉

m大您好:
是手機才需要放大功能沒錯,如果正常fullpage,手機移動下一頁,它的下一頁導航點會放大,且不會再顯示別的頁面,如果fullpage關閉,手機移動下一頁,雖然顯示下一頁的導航點放大,但他會容易再看到下下頁的內容..沒辦法剛好停在一頁的頁面上..https://ithelp.ithome.com.tw/upload/images/20180420/20097057XyzKuELMCz.jpg

marlin12 iT邦研究生 5 級 ‧ 2018-04-21 00:25:19 檢舉

我在前面講過,fullPage的功能就是控制每個section的大小,跟viewport一樣,而且換頁都是整頁。但是,正因為它控制住section的大小,所以不能讓用戶放大頁面。
如果要讓用戶放大,就必需要停止fullPage這個功能(即是轉為responsive的狀態)。但是,[副作用]就是不能[剛好停在一頁],用戶會看到前、後的頁面。這是fullPage在responsive下的特性,沒辦法。

marlin12 iT邦研究生 5 級 ‧ 2018-04-21 23:33:30 檢舉

關於[fullPage在responsive模式的時候,在長過屏幕高度的section裏,滾輪失效]的問題,只需要在那個section的class裏面,加入fp-auto-height-responsive,便可以解決。

	<div id="dowebok">
		<div class="section fp-auto-height-responsive">
		   這個section的高度大過屏幕高度,加上fp-auto-height-responsive可以讓它在responsive時,自動申延。
		   ...   ...   ...   ...
		</div>
		<div class="section">
		   這個section的高度小過屏幕高度,不需要自動申延。
		   ...   ...   ...   ...
		</div>
		...   ...   ...   ...
	</div>
mayyola iT邦研究生 2 級 ‧ 2018-04-22 00:01:42 檢舉

m大您好:
已經知道你的意思!謝謝 這些方法到底要去哪裡查阿??

marlin12 iT邦研究生 5 級 ‧ 2018-04-22 10:57:16 檢舉

全部有關fullPage的資料,我都是在它的官網裏找的。
alvarotrigo/fullPage.js

mayyola iT邦研究生 2 級 ‧ 2018-04-22 21:35:18 檢舉

m大好~請問你主要是看哪個檔,因為官網好像都是js跟css檔,其實我有看過但是,都是語法跟簡短註解,所以有時候都會卡住,您也是直接看js跟css檔嗎? 謝謝

marlin12 iT邦研究生 5 級 ‧ 2018-04-23 00:12:32 檢舉

我是看它在官網的README.md,看它是怎樣運作,和有甚麽option和function可以調教它的功能。除非你有很多時間,否則不建議去看或改它的源代碼。

0
froce
iT邦大師 1 級 ‧ 2018-04-17 21:59:08

modal是什麼?
是不是顯示一個block,在最上方?
那為什麼要放在第一段內容裡面,受fullpage.js的影響?

看更多先前的回應...收起先前的回應...
marlin12 iT邦研究生 5 級 ‧ 2018-04-17 22:06:18 檢舉

modal只是bootstrap做出來的一個dialog,當用戶click相關的button時,這個dialog便會跳出來。
Bootstrap - modal
樓主把modal放在button後面,原因是bootstrap的範例都是那樣做。只是他不知道popup dialog是不可以放在fullpage的頁面裏。

froce iT邦大師 1 級 ‧ 2018-04-18 10:50:07 檢舉

所以我覺得還是得告訴他modal的本質啊。
基本上那是不需要放在特定的section。
前端不用每個組件都實做,但還是建議至少基本概念要搞懂,尤其是用了一堆黑盒子後,觀念不清楚會造成各式各樣的奇怪現象。

mayyola iT邦研究生 2 級 ‧ 2018-04-18 12:03:36 檢舉

請問黑盒子是指插入太多套件嗎??

froce iT邦大師 1 級 ‧ 2018-04-18 13:35:06 檢舉

是啊,插件用下去的確不用想太多,效果又好。
不過有時候想想前端是怎樣做出這些效果的,對觀念澄清是很有幫助的。
想想不用bootstrap,你會怎麼做modal,然後做久了,你就知道這些撇步和哪裡踩下去會有雷了。

我要發表回答

立即登入回答