JQUERY 單選按鈕彈出

Question

嗨，我正在嘗試實現帶有單選按鈕的 jquery 彈出窗口。

這是我的 jquery 函數：

$("#myPopup").ready(function() {

var popUpList = $('<div><input type="radio">A<br><input type="radio">B<br><input type="radio">C</div>');

showPopUpButton.click(function() {
    popUpList.dialog();
});

});

我的jsp頁面上的相應html代碼：

<ul id="header_navigation">
    <li class="header_navigation_list">
        <a href="home" title="Home" class="header_navigation_link">Home</a>
        <span>|</span>
    </li>

    <li class="header_navigation_list">
        <div data-role="main" class="header_navigation_link">
            <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
            <div data-role="popup" id="myPopup">
                <p>This is a simple popup.</p>
            </div>
        </div>
    </li>
</ul>

我的查詢是我在 jsp 頁面上給出了彈出代碼和 id，但彈出鏈接不可見。 盡管“主頁”鏈接在網頁上可見並且正在運行。 我什至在 jsp 頁面的頂部包含了 jquery 庫。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

有人可以告訴我在jsp頁面上聲明我的彈出窗口時我做錯了什么。 TIA

Answer 1

jQuery 彈出窗口也需要樣式表<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

在下面找到符合您要求的工作片段：

 .radioText { margin-left: 45px; margin-top: -20px; padding: 10px; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <ul id="header_navigation"> <li class="header_navigation_list"> <a href="home" title="Home" class="header_navigation_link">Home</a> <span>|</span> </li> <li class="header_navigation_list"> <div data-role="main" class="header_navigation_link"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a> <div data-role="popup" id="myPopup" style="min-width:100px;padding:10px;"> <input type="radio" name="aehe" /> <div class="radioText">A</div> <input type="radio" name="aehe" /> <div class="radioText">B</div> <input type="radio" name="aehe" /> <div class="radioText">C</div> </div> </div> </ul> </body> </html>

JQUERY 單選按鈕彈出

問題描述

1 個解決方案

解決方案1
0 2017-06-09 17:09:33

JQUERY 單選按鈕彈出

問題描述

1 個解決方案

解決方案1 0 2017-06-09 17:09:33

解決方案1
0 2017-06-09 17:09:33