Ранее мы объяснили использование вкладки Bootstrap. Сегодня мы узнаем об использовании модельных всплывающих окон в начальной загрузке.
Эффект:
Код:
<input id="btntext" type="button" value="Add text component" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/><!-- Modal --><div id="myModal" tabindex="-1" role="dialog"><div><button type="button" data-dismiss = "modal"> × </button> <h3 id = "mymodallabel"> Модальный заголовок </h3> </div> <div> </div>
Это очень просто, это все.
Примечание. Свойство Target Data указывает на идентификатор модели, поэтому нажмите кнопку, и появится модель.
Конечно, вы также можете использовать JS для его управления.
Следующий код:
Show: $ ('#mymodal'). Modal ('show');
Hide: $ ('#mymodal'). Modal ('Hide');
Switch: $ ('#mymodal'). Modal ('toogle');
Событие: $ ('#mymodal'). On ('hidden', function () {// что -то ...});
Примечание: я использовал атрибут Href здесь, который должен позволить модели удалить URL. Конечно, вы можете написать то, что вы хотите, непосредственно в теле модели.
Если вы внимательно посмотрите на структуру Div модели, вы поймете, что модель-тел представляет собой контент, а заголовок модели-заголовок. Поэтому, если вы хотите добавить две кнопки внизу, вы должны использовать следующий код.
<div> <a href = "#"> Close </a> <a href = "#"> Сохранить </a> </div>
Примечание. Если вы хотите установить ширину модели, вы должны добавить макет. Он должен поместить модель в кодовый блок ниже и установить ширину модели. стиль = "ширина: 500px". Кстати, вы не можете просто поместить его в класс, используя стиль пролета. Полем
<div> </div>
Выше приведено использование всплывающего окна Bootstrap Model, представленной вам редактором. Я надеюсь, что это будет полезно для всех!