POPUP視窗隨內容文字延伸寬度

popup視窗延伸寬度 javascript

hi16p 2021-01-14 16:54:27 ‧ 2430 瀏覽

分享至

各位大大好:
我用JS寫了判斷式.讓POPUP視窗隨內容文字延伸寬度.但目前只有(24 >= bigtitle.length)的設定產生作用.請問我哪裡寫錯了呢?有勞各位費心了~

JS程式碼如下:

function popupWidth() {
    var topWidth=$(".modal-dialog").outerWidth();
    var bigtitle=$(".modal-body h3");

    if(24 >= bigtitle.length){
        $(".modal-body h3").css("width","500px");
    }
    if(bigtitle.length > 24 && bigtitle.length <= 31){
        $(".modal-body h3").css("width","640px");
    }
    if(bigtitle.length > 31 && bigtitle.length <= 42){
        $(".modal-body h3").css("width","880px");
    }    
}

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2021-01-14 18:51:33 檢舉

試試:

let bigtitle_len=bigtitle.length;
if(bigtitle_len ＜= 24){
$(".modal-body h3").css("width","500px");
}else if(bigtitle_len ＞ 24 && bigtitle_len ＜= 31){
$(".modal-body h3").css("width","640px");
}else if(bigtitle_len ＞ 31 && bigtitle_len ＜= 42){
$(".modal-body h3").css("width","880px");
}

好奇問一下　你這個有用到bootstrap嗎?

hi16p iT邦新手 5 級 ‧ 2021-01-15 09:03:53 檢舉

有~bootstrap 4

ccutmis iT邦高手 2 級 ‧ 2021-01-15 10:07:59 檢舉

那就很不建議用js去調元素的寬度因為那會影響bs框架本身的運作
樓下兩位大大提的都是好建議應該是要納在一起運用:
像ShawnL提到的是改善執行效能效率的問題
而星空大提的是直接跟你的內文有關的
要動態去調寬度這種直接用js去修改值的方式可能會有問題
應該是要改bs提供的css樣式(類似@media原理)

範例已貼在回答區提供您參考... 不需要js 也不會影響bootstrap responsive

hi16p iT邦新手 5 級 ‧ 2021-01-15 17:08:10 檢舉

感謝各位大大的回覆~
我將檔案整理出:https://osj3ghqlpxgdyanngz1ngq-on.drv.tw/KN/DEMO_202101/demo_02.html
現在Preset / S Size兩個按鈕在『bigtitle.length小於出來等於24字』時寬500px正確的.
但M Size / L Size兩個按鈕在仍是吃到『bigtitle.length小於24字』寬500px的設定(M Size按鈕出來應該是介於24-31字間寬640px . L Size按鈕出來應該是介於31-42字間寬880px).
各位大大給的方式都有設定過(包含不用BS的POPUP).但仍無解才又來麻煩各位.還請各位在幫忙了!!!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

ccutmis

iT邦高手 2 級 ‧ 2021-01-15 11:36:54

最佳解答

土法煉鋼的bootstrap5範例提供您參考:

Demo:

https://ccutmis.github.io/ithome-htm/bs5_modalResizeByTitleLen.htm

Source:

(範例是從官網複制貼上加上一些小修改)

<!doctype html>
<html lang="zh-tw">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title> modal-title 標題文字長度超出頁面寬度時隱藏 </title>
  </head>
  <body class="bg-dark">
<h1 class="text-primary p-1 m-1 text-center clamp">[Demo] modal-title 標題長度超出頁面寬度時隱藏</h1>
<!-- Button trigger modal -->
<div class="text-center pt-2">
    <button type="button" class="btn btn-primary questionBtn" data-array-index="0">
        Preset
    </button>
    <button type="button" class="btn btn-primary questionBtn" data-array-index="1">
        S Size
    </button>
    <button type="button" class="btn btn-primary questionBtn" data-array-index="2">
        M Size
    </button>
    <button type="button" class="btn btn-primary questionBtn" data-array-index="3">
        L Size
    </button>
</div>
<!-- Modal -->
<style>
.min-vw-100-fix{
    min-width: 95vw!important;
}
.clamp{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
}
</style>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title clamp" id="exampleModalLabel">很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，很長的標題，</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
<script>
    const DATA_DICT={
        "0":["HEADER"
            ,"<p>Content Title 1：Content Text</p><p>Content Title 2：Content Text</p><p>Content Title 3：Content Text</p>"
            ],
        "1":["訊息說明主題七八九十一二三四五六七八九_二十四字"
            ,"<p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三_十七字</p><p>該訊息內容六七八九_十三字:一二三四五六七八九十一二三_十七字</p>"
            ],
        "2":["訊息說明主題七八九十一二三四五六七八九十一二三四五六_三十一字"
            ,"<p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p>"
            ],
        "3":["訊息說明主題七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七_四十二字"
            ,"<p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p>"
            ]
    }

let element = document.querySelectorAll('.questionBtn');
for (i = 0; i < element.length; i++) {
    element[i].addEventListener('click', function() {
        console.log(this.getAttribute('data-array-index'));
        let bodyWidth=(window.innerWidth)?window.innerWidth:document.body.clientWidth;
        let bodyHeight=(window.innerHeight)?window.innerHeight:document.body.clientHeight;
        console.log(bodyWidth,bodyHeight);
        let tmp_index=this.getAttribute('data-array-index');
        const word_width=23;
        let tmp_width=DATA_DICT[tmp_index][0].length*word_width;
        document.querySelector("#exampleModalLabel").innerHTML=DATA_DICT[tmp_index][0];
        document.querySelector(".modal-body").innerHTML=DATA_DICT[tmp_index][1];
        console.log(document.querySelector(".modal-body").offsetHeight);
        tmp_width=(tmp_width<500)?500:tmp_width>bodyWidth?bodyWidth:tmp_width;
        document.querySelector(".modal-dialog").style.marginLeft=(bodyWidth-tmp_width)/2+"px";
        document.querySelector(".modal-content").style.width=tmp_width+"px";
        let myModal = new bootstrap.Modal(document.querySelector("#exampleModal"), {});
        myModal.show();
        
    });
}
</script>
  </body>
</html>

依照樓主給的檔案修改後的demo:
http://www.web3d.url.tw/ITHELP/tmp/modal-title-resizer-demo/index.htm

主要改動部份:

<ul class="button_zone">
	<li><button class="btn_Question" data-toggle="modal" data-array-index="0">Preset</button></li> 
	<li><button class="btn_Question" data-toggle="modal" data-array-index="1">S Size</button></li> 
	<li><button class="btn_Question" data-toggle="modal" data-array-index="2">M Size</button></li> 
	<li><button class="btn_Question" data-toggle="modal" data-array-index="3">L Size</button></li> 
	<a class="btn popupbtn">Reveal Popup</a>  
</ul>

<div class="modal" tabindex="-1" role="dialog" id="boardmodal" aria-hidden="true" >
         <div class="modal-dialog" role="document" > 
            <div id="modal-content" class="modal-content">
                <div id="modal-header_Question" class="modal-header">
                    <div class="icon_lt lt_q"></div>
                    <h5 class="modal-title">Question</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button> 
                </div>
                <form>
                    <div class="modal-body">
                        <h3 class="modal-body-title text-left">HEADER</h3>
                        <div class="modal-body-content text-left">
                        </div>
						<h3 class="modal-body-footer">FOOTER</h3>
                    </div>
                    <div class="modal-footer">
                        <div class="btn_zone">
                            <button type="button" class="btn btn_Question">Send</button>
                            <button type="button" class="btn btn-secondary btn_red" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
           </div>
       </div>
</div> 

<script>
const DATA_DICT={
	"0":["HEADER"
		,"<p>Content Title 1：Content Text</p><p>Content Title 2：Content Text</p><p>Content Title 3：Content Text</p>"
		],
	"1":["訊息說明主題七八九十一二三四五六七八九_二十四字"
		,"<p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三_十七字</p><p>該訊息內容六七八九_十三字:一二三四五六七八九十一二三_十七字</p>"
		],
	"2":["訊息說明主題七八九十一二三四五六七八九十一二三四五六_三十一字"
		,"<p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一_二十七字</p>"
		],
	"3":["訊息說明主題七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七_四十二字"
		,"<p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p><p>一訊息內容六七八九_十三字:一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四_三十九字</p>"
		]
}

$('.btn_Question').click(function(){
    let bodyWidth=$('body').width();
	let tmp_index=$(this).attr("data-array-index");
	console.log(DATA_DICT[tmp_index][0].length);
	let tmp_len=DATA_DICT[tmp_index][0].length;
	let tmp_width=500;
	if(tmp_len>=24&&tmp_len<31){
        /* 三元運算子用法: 條件判斷?真:假 等同於單行的 if(條件判斷){真}else{假} 在這裡用這個寫法是為了讓源碼簡潔一點 */
        tmp_width=(bodyWidth>650)?650:bodyWidth-10;
	}else if(tmp_len>=31&&tmp_len<42){
		tmp_width=(bodyWidth>780)?780:bodyWidth-10;
	}else if(tmp_len>=42){
		tmp_width=(bodyWidth>1050)?1050:bodyWidth-10;
	}
	$('#boardmodal').modal('show');
	$('.modal-content').css("width",tmp_width+"px").css("left",((bodyWidth-tmp_width)/2)+"px");
	$('#boardmodal .modal-body-title').html(DATA_DICT[tmp_index][0]);
	$('#boardmodal .modal-body-content').html(DATA_DICT[tmp_index][1]);
});
</script>

另外在style.css裡面把left:50%!important;那行註解掉

.modal-dialog {
    width: auto !important;
    display: inline-table !important;
    /*left: 50% !important;*/
}

對話框的left是在js裡面處理
參考上面js： .css("left",((bodyWidth-tmp_width)/2)+"px");

不好意思，原本我打算整個打掉重新弄一個範例，不過看到樓主的HTML源碼後有點傻眼，結構蠻亂的(讓我想到剛進這行的時候也做過類似的事哈哈)，還有不知樓主為何還在用jquery1.x的東西加上另外一些奇怪的log...，如果可以的話我是建議用新一點的庫，也要學習不用juery的作法。

總之為免弄出來的範例讓樓主分心，我決定直接用原始html做修改就好，希望有幫助。

回應 7
分享
檢舉

看更多先前的回應...收起先前的回應...

hi16p iT邦新手 5 級 ‧ 2021-01-15 17:07:23 檢舉

ccutmis iT邦高手 2 級 ‧ 2021-01-15 17:32:00 檢舉

看過你的網頁我的想法就是從js程式架構方面還有css語法方面都有需要大改的地方甚至可以說要打掉重練我簡單舉兩個例子:

modal比較好的作法不是讓你在頁面崁入好幾個而是用js動態載入不同的內容
看到某些地方有 style="....;"的寫法，基本上你要限制自己儘量少用這種方式，這跟css選擇器的優先權有關
(html標千裡面的style="..." 高於 #id，
而 #id 高於 .class，
而 .class 高於擬類別(如:hover)，
而擬類別高於屬性(如input[type="submit"])，
而屬性高於元素擬類別(如::before) 等等...)
看的一頭霧水嗎沒關係就先給自己設個封印非不到最後關頭不用 style="...;" 等你了解上面css選擇器的優先權全部的意思後就會懂。

不過我現在沒空整個範例給你參考，晚上我會用你給的網址內容做參考再弄個我想做的範例給你參考，明天你有空時再來~

hi16p iT邦新手 5 級 ‧ 2021-01-15 17:36:40 檢舉

感謝大大~我明天會來看的.有勞你費心了

ccutmis iT邦高手 2 級 ‧ 2021-01-15 22:01:07 檢舉

修改好了我有在上面的回答最後面補上更新的內容
希望有幫助!

ccutmis iT邦高手 2 級 ‧ 2021-01-16 15:43:19 檢舉

依照樓主給的檔案修改後的demo:
http://www.web3d.url.tw/ITHELP/tmp/modal-title-resizer-demo/index.htm

我用原本單行超過寬度會隱藏的範例加上調整寬度的效果(不用jquery)
https://ccutmis.github.io/ithome-htm/bs5_modalResizeByTitleLen.htm

hi16p iT邦新手 5 級 ‧ 2021-01-16 23:10:13 檢舉

長知識了~感謝大大精細的解說

ccutmis iT邦高手 2 級 ‧ 2021-01-17 12:55:17 檢舉

不客氣，教學相長，我也是在複習自己以前學過但很久沒碰的東西:D

補充一個跟jquery有關的古文給您參考:
https://ithelp.ithome.com.tw/articles/10090418

登入發表回應

ShawnL

iT邦新手 1 級 ‧ 2021-01-14 17:19:41

先通靈你應該是想依照標題文字字數來調整樣式：

在 jQuery 中，$("selector") 的寫法是用來選取 DOM 元素的，所以 $("selector").length 是顯示 比對到的元素數量

你可以使用 $(selector).text().length 來取得比對元素的文字字數，另外建議將邏輯中有重複使用到的 $("selector") 宣告於變數中，避免每次都要重新遍歷整個網頁去比對元素，且除非有特定需求或是原先寬度寫死，不然一般來說都會讓元素自動縮放。

回應
分享
檢舉

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-01-14 17:50:05

一般要自適應寬度。我都會用 padding 再搭配 minwidth跟maxwidth 來微調處理。

要不然最好還是搭配@midea處理。
不要直接用js處理會比較好。

回應
分享
檢舉

登入發表回應

japhenchen

iT邦超人 1 級 ‧ 2021-01-15 12:20:25

如果你不是用等寬字型的話，依字數來推寬度，在中英文交雜的情境下，會出現推估寬度失真的問題，你可以用HTML5的語法來推寬度...

真的要看看星空大的建議，盡量別用js來取得寬度，這不合RWD規範，你硬用文字寬度來調整容器，結果就是把畫面破壞掉

var c = document.getElementById("whatcontainer");
var ctx = c.getContext("2d");
ctx.font = "10px TAHOMA";
var widthText = ctx.measureText("ABCdiwx中英文夾雜").width;